Interface Design Structures

It is important to look at various requirements vital for the design structure in order to develop a successful and effective interface.

Once a page starts to load and appear the user will focus on various features which I have displayed below:

• Buttons (to click for other actions and or options)
• Clear structure with clues on what things are and what they might lead to
• Less input from the user (when a lot of input is required the user is likely to come off the page)
• Using visual elements to highlight various features will attract users into using it although it is important to keep it a minimum
• Use large/bold text to highlight important information such as menus

I looked further into requirements of an interface to see what tips and advice I could gather:

• Add Padding to a Link:

By adding padding to a link it makes it look bolder and more appealing to click on, it can also serve as a point of focus to the user.

• Use Contrasts: 

By contrasting the colour and style of the letters it draws attention to the areas the web designer wants the user to focus on. This technique also distinguishes not so important information that still needs to be included. 

• Colour to identify Features 

Colour is a great tool to use to draw the users attention to various areas that the designer wants a lot of traffic drawn into. Using warmers tone of colour such as red and orange are effective in making an element stand out to a user, it is also very likely that they click on it.

• Letter Spacing

CSS allows web designers to user letter spacing in order to make text clearer and understandable. It is advised that the technique is used mainly for headings and not the body of text.

• White Spaces

By using white spaces it allows to user to identify elements that belong together and those that do not. An example I can give is the technique for writing my blog, I have used the white spaces to separate the categories, headings and text. This technique creates a form of blocks making it easier to identify what goes with what. 

• Hover Control

Hover control is a practical way of displaying more information without de-clattering the web page. When a page is overloaded with information sets become uninterested and frustrated as there is too much to look at this is where the hover control comes in. The way this works is that the most important information is displayed for everyone to see, if they are interested in the information they will place their mouse over one of the areas, this triggers the hidden information to appear to the user allowing them to see all the features available. A great aspect of the hover tool is not no complex code is needed therefore it is simple to achieve and apply to the interface. A minor accessibility issue would be that some user may not be able to identify this feature of the interface but it is a minority therefore it is still an effective method. 

• Auto Focus

Forms are a common feature on websites intact many users searching for a specific thing will use a search form to find it directly. When designing a website it is key to identify if the form is the main feature of the website, if so the designer needs to make sure that the user instantly focuses on that input method. The use of JavaScript allows the page to focus on the input field although one issue is that the user is not able to go back to the previous page of the website as the information is deleted during the change of page process.

• Using Verbs in Labels

A proven successful method in an interface is using verbs were labels should be placed, this allows the user to make a decision without the need to read what the entire thing says. By using the verbs they know already what is being asked therefore allowing them to make a quick decision. 

• Advertising

Although most of us find adverts unappealing, if the interface provides high quality information users will stay on the page. Sometimes content overrides the look of the interface although for my project is its vital that the design is effective in order to make it enjoyable for both students and lecturers to use this is because I am trying to reduce the use of hardware for saving and resorting to.

Now that I have looked at important features to include within my interface I will start to develop a homepage paper prototype of what I would like my project to look like. 

Sources

Fadeyev, D. 2008. 10 Useful Techniques To Improve Your User Interface Designs. [online] Available at: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/ [Accessed: 16 Nov 2013].