User interfaces and experiences have become paramount to the success of websites and web applications. Having a great interface will save time, money and uplift users. In a world where productivity is everything, the ability to save time is possibly the most important part of any application. A great user interface lets you work seamlessly and effortlessly. Achieving this is another can of worms all together though.
A great user interface needs some features in place:
Easy to use elements with natural user experience principles
Designers sometime make the mistake to be over-creative when designing a user interface and experience. Being too unique can damage the simplicity and confuses the basic use of elements within the user interface. Designing something that is cool might mislead the user and end up causing re-learning instead of simple ease-of-use.
Most things in modern 2.0 designs look the same. Take Mac for example; why does most Mac inspired designs use the same menu structures, search functions and buttons? Because the user expects it to look like that. Reinventing the wheel might look cool and fresh but will cause headaches in the long run.
Although this is boring and sometimes monotonous it is what the user expects and at the end of the day what customers pay for.
Fast and smooth interaction between pages
Time has become everything we know. To save time, you need speed. To gain speed you need precision. This is very important when developing the user interface.
No one wants to wait when navigating to the next step of an application process. Thus using smart techniques such as AJAX, compressed JavaScript, CSS and a good hosting solution is principal to the success of your website.
Colour differentiation to hearten call to action elements
Intelligent colours are very important when designing the user interface. Colour sends positive and negative signals to the user and thus guides them nicely along the features of a website.
Some cool ideas:
- Use distinct colours with your call-to-action buttons for example green for go or continue.
- Bright yellow or orange for sign-up and new notice buttons.
- Use red when user needs to think before clicking an action. This will avoid unnecessary issues when re-evaluating future fixes.
Having subtle rollover statuses is also important when engaging a user as most people relate links to either the underline feature or slight colour change. This will ensure trust in completing a specific call to action.
Load indicators to encourage usability
Lately I’ve been fiddling a lot with ways to keep the user more at ease whilst processing information using technologies like AJAX. Using load indicators makes this fun and keeps the user alert to the next step of a specific process.
These are just some simple ways of creating an awesome user interface and engaging experience.
Always keep in mind that what we designers see as cool and functional might be completely out of line for users.
Keep it stupid, keep it simple.
Great post! Gonna try out the button colours in my next project.
Nice post Ryan. User interface design is always important because it is the visual presentation of your business.
Great post! to add something very important when building your design, make sure that it’s compatible with the top 5 browsers (IE,Firefox,Chrome,Safari and Opera). When you start using CSS,Jquery and AJAX, things can get quite complicated with certain browsers, so always make room for some testing, and get those browsers rollin!
Thanks for the comments! I agree Gerrit, browser-compatibility is critical especially with some browsers being less friendly towards JavaScript and CSS.
Though, and this is an issue I am facing currently working with mobile… overhead. All of the niceties add a helluva lot of overhead. Specifically smooth interfacing, ajax, indicators etc. Then you have the issue between smart phones/feature phones. Look we are rocking it, but it’s a big learning curve.
I realise your post is probably web / web app specific, but even so, our bandwith environment isn’t so that this becomes negligible.
On color usage I agree 100%. I find that I can achieve more with simple, straightforward color use, and simplicity, than i can with fancy effects. Although, red is associated more with danger, problems and errors, so I am hesitant to use it for things you WANT them to do. Problematic when two of our brands are mostly… red…
On your comment regarding less friendly browsers. Always build from stupid to clever. So you build your base for less friendly browsers, then build on top of that with your fancy. That way it can fully degrade, and at it’s most degraded you still have a fully functional system.
Sorry, hogging comment space. *tjirs Nice site though Ryan, but I enjoyed your previous 1 pager much more. A pity to see it gone.
Also, usable comment systems. Ack! Took me 3 page reloads, and resign ins just to post a comment. meh. Even this comment is taking me a few reloads…