background preloader

12 Useful Techniques For Good User Interface Design - Smashing Magazine

12 Useful Techniques For Good User Interface Design - Smashing Magazine
Advertisement Last week, we presented 10 Useful Web Application Interface Techniques471, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page. This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. You may also want to take a look at the following related articles: 1. One of the most significant elements of a good user interface is visibility of the system’s status. 7Yammer8 applies not one but three effects on all new messages in a feed: fade in, slide down and highlight. One great way to do this is with animation. 2. How do you implement this? Here is the (X)HTML: ... 3. Related:  UI & UXGraphisme

Usability vs. User Experience (UX) I sometimes get the question what the difference is between Usability and User Experience (UX). One may think that User Experience doesn’t necessarily imply that something is usable (whether it’s good or bad, it’s still an experience), and hence Usability is superior to User Experience. However, the emerging trend is to refer to User Experience as the wider perspective and Usability as being part of User Experience, as illustrated below. By this definition Usability is a subset of the overall User Experience. Usability answers the question, “Can the user accomplish their goal?” with effectiveness, efficiency, and satisfaction about the results (as per the ISO 9241-11 definition of usability). A commonly used example of great User Experience is the Apple iPhone where Apple has spent efforts in all of the areas above and succeeded in doing so. There’s a lot of debate on this topic out there.

UI research – speed matters and 10s+ page load is a killer | The Earlier this week usability expert Jakob Nielsen (famous for his eyetracker studies) published the results of some research into the importance of page response times to user experience and perceptions of brand. In his words “users really care about speed”. In Jakob’s assessment speed matters for two reasons: human limitations, espescially in the areas of memory and limitation human aspirations – fast interfaces make us feel like we control the computer (a feeling we like) whilst slow interfaces make us feel like it is the computer that is controlling us (not so good…) In interviews Jakob has found that slow site speed is something which sticks in the minds of users when thinking about services they have used in the past. It can even become one of the brand values associated with a site. Jakob proposes three response time limits: 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer.

MIX Online 10 User Interface Design Fundamentals It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way. Free trial on Treehouse: Do you want to learn more about web design? Click here to try a free 14-day trial on Treehouse. ‘Staying out of the way’ means not distracting your users. Rather, good UIs let your users complete goals. Check out our other design courses at Treehouse. When getting started on a new interface, make sure to remember these fundamentals: 1. “Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Your user’s goals are your goals, so learn them. 2. Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). CoTweet uses a familiar UI pattern found in email applications. 3. Your users need consistency. 4. Design your interface in a way that allows the user to focus on what is most important. 5. 6.

5 Useful Coding Solutions For Designers and Developers | CSS | S Advertisement Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. As you know, we, at Smashing Magazine, are quite curious folks. We would like to start with 5 advanced elegant coding solutions and ask you if you are interested in this series and would like to have more similar articles. 1. Over the last years we have discovered a strong trend toward sliding horizontal menus (also known as Coda Slider effect). The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. All content blocks are not loaded on demand via Ajax, but loaded up front when the page is loaded. How is it done? 2. EllisLab uses an interesting design approach to present the members of its team. 3. 4. 5.

Windows Presentation Foundation (WPF) An updated collection of seven themes replaces the original nine WPF Themes. Some of the issues with the original themes have been addressed in this update. Download the WPF Themes in the WPF Futures release. How to Use the WPF Themes How to use the WPF Themes in your application: Resource dictionary You can use the themes as a resource dictionary. Themes Quick Reference

When to Use White Text on a Dark Background by anthony on 04/28/11 at 11:11 am Many websites use black text on a light background to display their content because it’s easy to read. However, using white text on a dark background also has its advantages. Knowing when to use one over the other will allow you to safely apply these techniques to your design without hurting user readability. When it comes to text on websites, users either read or scan. Paragraph Text The kind of text that users read is paragraph text. White also reflects all wavelengths of light. That’s why a better choice for displaying paragraph text is black text on a light background with a tint of gray. However, if your site uses a dark background, display your paragraph text in gray instead. Headings, Titles and Labels There is a time when white text on a dark background works well. Using white text on dark backgrounds as a highlighting tool is a smart way to call out important elements that users often scan.

Balsamiq Studios, makers of plugins for Web Office applications Web Design Training | Adobe Fireworks | UI Design | Michael Locke Visualizing Social Software Best Practices: Three Approaches - R Here in the US it's the busiest travel day of the year and while media events and new product launches lay low, entrepreneurs and geeks are hard at work building the software that will launch in coming weeks. There's no better time to kick back and let yourself get philosophical. Social software is a whole new world in many ways and people everywhere are trying to figure out how to design effective and compelling applications. I offer for your consideration today three recent attempts to articulate social software design best practices. Let's discuss. Social Software Elements by Thomas Vander Wal Thomas Vander Wal is the man who coined the term folksonomy, meaning classification through collaborative, social tagging. Yesterday Vander Wal posted the following slide from a presentation he gave this month in Stuttgart, Germany. OpenSocial's Recommended Practices One of the most interesting things to come out of it so far has been the OpenSocial "Social Design Best Practices."