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.
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.
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."
Make Those Web Apps Run Fast! (Or At Least Fake It) - ReadWriteS Back in February at the Future of Web Apps (FOWA) conference in Miami, Union Square Ventures' Fred Wilson presented on his 10 Golden Principles of Successful Web Apps. For those not fortunate enough to attend the conference, a video and transcript of the talk and subsequent Q&A session with Wilson is now available online for the general public to learn what one of the leading east coast investors advises startups do to succeed on the Web. So what does Wilson say is the single most important feature of the Web apps that win? "When we see some of our portfolio company's applications getting bogged down, we also note that they don't grow as quickly," Wilson said. This reminds me of an idea I've been pondering from time to time about Web apps, and that's the perception of speed. In his talk, Andrews mentioned how Google just feels faster than Yahoo because the homepage isn't as busy with supplementary items. Photo by Flickr user Nathan Bittinger.
10 Useful Techniques To Improve Your User Interface Designs | Ho Advertisement Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. 1. Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Attention to every detail is what separates a great product from a mediocre one. At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so: This gives the whole button a more balanced look and feel. 3. 4. 5. 6. 7. 8. 9. 10.
9 Useful Techniques for User-Friendly Tables by anthony on 07/11/11 at 12:33 pm Tables are great for displaying information. But making them user-friendly is a challenge. One reason it’s challenging is because the table grid limits the amount of information you can display in a table cell. The following techniques solve these design challenges so that users can read and process your tables with ease. 1. A table will have multiple columns, so you can’t make your columns too wide. It’s unnecessary to display every digit of a number. 2. Data abbreviations help condense information. 3. It’s important to make your columns thin, but it also important to make your rows short. 4. The bad thing about a long table is that you lose the column headers when you scroll down deep. 5. When users scan a row, their eyes can easily trail off and accidentally fall into an adjacent row. 6. You can make your table easy to read by numbering each row. 7. The more information you have on your table, the more rows you’ll have. 8. 9. Conclusion
Game Mechanics for Interaction Design: An Interview with Amy Jo Game design expert Amy Jo Kim shares her insights into applying game principles to the design of online communities. Amy Jo Kim is a game/social/web designer known for bridging the divide between game and web design. She has designed software UIs, games, online communities, and wrote the seminal book Community Building for the Web way back in 2000. I have long admired her work, and I am grateful that she recently sat down for an interview on the basics of game mechanics and how they can be used in interaction design. You have a background in software interface design. How did you end up doing game design? I have an eclectic background in neuroscience, computer science, and psychology. In 1995, I left Viacom and launched a consulting business (Shufflebrain) focused on “social architecture for online environments.” What are game mechanics, and what is the primary value of thinking about game mechanics in interaction design? What sites are very good at promoting gaming principles and why?