This is an article that describes a few effective design patterns so you can choose and modify them as needed. Input controls The very nature of input controls is to allow your user to interact more deeply with the site. But there’s a paradox here: the users usually want more control, but every new control complicates the UI and clutters the screen. One of the best ways to strike that perfect balance is to have controls on demand. CollabFinder Source: CollabFinder The idea is to save on-screen space by hiding your controls instead of flat-out getting rid of them. It’s a win-win solution and the proof of its effectiveness is seen in how nearly all high-profile websites have adopted it.
Controls can be hidden and revealed by hovering over the affected content, hidden in collapsed drop-down menus via tabs, or a hybrid of the special leads two, as with the CollabFinder example above. But input controls aren’t always proper controls. The text input field, for example, can be a valuable tool, but a lot of designers take that for granted; they use a generic text field and forget it’s even there. Customizing your text box will not only infuse some personality into your site but also set you apart from other sites. This can be great to look into, especially if the default box colors don’t fit with your site’s colors. Google If your site centers around a single input field, or if the input is a necessary first step, setting an auto-focus on that input field would be a smart move.
Auto-focus is when the cursor starts within the field automatically, most famously used by Google. As soon as you enter, you can simply begin typing your query without having to click anywhere. As described in Web Patterns Google also incorporates default values and auto-complete, which significantly speeds up user actions and helps users explore additional topics and themes. Google2 If you need a little help with the specifics of changing the text field box, this site will give you some help with the coding. Navigation One of the essential elements of design is a fully functional navigation platform. It is completely necessary for every site — it doesn’t matter how great the rest of your site is if your users can’t find anything. Adobe Because navigation is so important, there are some universal rules that can be applied to every site.