10 Useful Web Application Interface Techniques

There’s a great article from Smashing Magazine today which outlines 10 simple interface ideas which contribute hugely to a good user experience. A few of them are common in many well-designed web applications, but there’s a couple of really good ideas in there that perhaps aren’t quite so well known.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

Summary

1. Interface elements on demand
2. Specialized controls
3. Disable pressed buttons
4. Shadows around modal windows
5. Empty states that tell you what to do
6. Pressed button states
7. Link to the sign-up page from the log-in page
8. Context-sensitive navigation
9. More emphasis on key functions
10. Embedded video

The article itself goes into much more detail about each point, with useful illustrations and screen-shots of these techniques in practice.

Sample screen-shots

Hide or conceal advanced functionality
Hide or conceal advanced functionality

Using empty states to motivate users and animate actions
Using empty states to motivate users and animate actions

More emphasis on key functions
More emphasis on key functions

Original article: http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

 
 

Leave a Reply

 

Categories