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 & UX

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.

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.

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.

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

Why Rounded Corners are Easier on the Eyes by anthony on 08/17/11 at 10:17 pm Designers use rounded corners so much today that they’re more of an industry standard than a design trend. They’re not only found on software user interfaces, but hardware product designs as well. Rounded Corners are Easier to Process Anyone can appreciate the aesthetic beauty of rounded corners, but not everyone can explain where exactly that beauty comes from. Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. Scientific research done on corners by the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Which object is easier to look at? We’re Conditioned for Rounded Corners Another explanation on why we have an eye for rounded corners is because they’re more organic to how we use everyday objects in the physical world [3]. Conclusion References

Why Users Fill Out Forms Faster with Top Aligned Labels by anthony on 09/01/10 at 3:48 pm Imagine a user who is really excited about your product or service. They’re ready to sign up, so they go to your form page and start filling out their information. Top aligned labels are faster and easier to fill out than left or right aligned labels. The only drawback with top aligned labels is that they can make the form long. The difference is clear. 5 Essential Product Design Books That Aren’t About Product Design "What are some good books about product management?" is a frequent question for designers and engineers, especially those who are first-time founders. While there are any number of volumes you can peruse about agile development, team building, roadmaps or whatever skill you want to acquire, the art of product design is more elusive. If you're really going for 9th level blackbelt Caine kung-fu, you need to head off the beaten path and find not tips, tricks and tactics, but inspiration and anthropology. Absorb truths about science and people to identify needs based on the human condition, not a market analysis. Here are five of my essential product design books that have nothing to do with product design: 1. If you don't own this book don't even read further. Breathless praise aside, Cialdini identifies key principles of persuasion such as social proof, reciprocity, subservience to authority figures, desire to act in a consistent manner and perceived scarcity. Free bonus content! 2. 3. 4.

Why most UX is shite I was invited to speak at the event this week where getting a little sweary and ranty is kind of encouraged (it goes well with the craft beer consumption that is an integral part of the conference mix). This was my contribution. Slides: When I checked the agenda to see what I was supposed to be talking about at Monkigras, I saw that I was down to talk for 15 mins about ‘Crafting Good UX’. An elegant UIBeing AddictiveA Fast Startbeing Seamless, andIt Changes You I hate these kinds of lists. If only that were true, we’d be overwhelmed by UX amazingness. It’s not that simple right. Now, there are plenty of ways you can make a user’s experience of your product rubbish, but in my experience, there are a handful of serial offenders. 1. So, this one I see ALL the time. From a start up who doesn’t want to rule anything out of its value proposition so doesn’t really know what it is so, as a consequence, no one knows what problems it’s solving so they don’t engage. This starts at the top. 2. 3. 4.

10 UI Ideas to Learn from Gumroad) 10 UI Ideas to Learn from Gumroad Gumroad is an exciting new startup that lets anyone sell digital content with just a link. It was founded by the prolific Sahil Lavingia. Sahil has designed a number of useful apps, ranging from Pinterest in the early days, to Turntable, to Crate, to Caltrainer, etc. He’s got a keen eye for design, so why not learn from him and his work? This is how the Gumroad home page looks, un-dissected. And here is the dissected version, with the 10 things we’ll learn - Let’s get started - 1. This top bar has become increasingly common. When we visit sites, a split second is used to subconsciously say “Oh, these are the colors we’re using here. Note that Sahil has picked energetic colors. 2. A lot of logos have very little to do with the name or product of a company. But others have plenty to do with the name of the company/product. Also, it is not easy to make a well-styled logo or favicon that integrates multiple colors smoothly the way that the Gumroad logo does. 3.

Your Facebook Account has Three Passwords