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
Hand Gestures Dramatically Improve Learning Kids asked to physically gesture at math problems are nearly three times more likely than non-gesturers to remember what they've learned. In the journal Cognition, a University of Rochester scientist suggests it's possible to help children learn difficult concepts by providing gestures as an additional and potent avenue for taking in information. "We've known for a while that we use gestures to add information to a conversation even when we're not entirely clear how that information relates to what we're saying," says Susan Wagner Cook, lead author and postdoctoral fellow at the University. "We asked if the reverse could be true; if actively employing gestures when learning helps retain new information." It turned out to have a more dramatic effect than Cook expected. In her study, 90 percent of students who had learned algebraic concepts using gestures remembered them three weeks later. Cook used a variation on a classic gesturing experiment.
New Approaches To Designing Log-In Forms - Smashing Magazine Advertisement For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all. These experiences are not just frustrating for us, but are bad for businesses as well. To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. Is This You? Gowalla’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. The sign-in form on Gowalla. But Gowalla has taken the time to include a few more components to help people log in with more confidence if their first attempt hasn’t worked. A log-in error on Gowalla. Instant Sign-In Quora’s one-click log-in page. It’s Not Over (al)
Don’t Put Hints Inside Text Boxes in Web Forms By Caroline Jarrett Published: March 21, 2010 This is my first Good Questions column for UXmatters. In this column, I’ll be writing about questions. When communicating with users in one direction, we typically ask them questions—often through forms or surveys. When communication goes in the other direction, we try to respond to users’ questions—both through the design of our Web applications and other products and, sometimes, in assemblies of what we hope will be their Frequently Asked Questions. “Hint text is rarely effective as a way of helping users, but instead becomes a default input.” In January 2010, Janet Six’s column, Ask Matters, “Label Alignment in Long Forms,” included extensive discussion of one of the most frequently asked questions about forms design: where to put labels in relation to their fields. Don’t worry. The short version of my advice: Don’t do it! Read on, and I’ll explain. An Example of a Hint Inside a Text Box Where Did the Idea of Hint Text Come From? Reference
31 Extremely Impressive Web Icon Sets for Free 31 Extremely Impressive Web Icon Sets for Free 13,185 views In Freebies by Sheila Mahusay Sep 28th, 2011 2 Comments Icons are one of the fundamental components of Graphical User Interface (GUI). In web applications, icons serve as an intuitive representation of hypertext links and quick navigation from a web page to another. Creating icons can be very protracted since certain design specifications are to be considered such as its color, shape, design, size and scalability. So, why squander much of your time creating them when you can avail free high quality icons in just a few clicks. You may also want to read the related article below. Don’t forget to Subscribe to our RSS-feed and Follow us on Twitter — for recent updates. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 10 Free Useful Icons for Designers 11. iPad 2 Icons 12. 13. 14. 15. 16. 17. 18. iCandies Icon Set 19. 20. 48px Web Icon Set 226 icons 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 16px Glyphs 31. You like this post? Author Sheila Mahusay 2 Responses
Drop-Down Usability: When You Should (and Shouldn't) Use Them - Articles Drop-down lists are great – when used correctly. If there’s anywhere between 7 and 15 options, a drop-down list is usually a really good fit. You can put a healthy amount of information in your form without cluttering the entire page, because the list’s options are hidden when you don’t need them. However, many sites are using drop-down lists with too many options (more than 15) or too few (less than 7), resulting in a poor user experience. Drop-down lists with too many options When drop-down lists grow larger than 15 options they become difficult to scan and navigate. A good example of this is a country-selector with more than 100 options! Like most e-commerce stores, Amazon force you to select your country from a massive drop-down list. As a user, you first have to figure out the sorting pattern – are the options listed alphabetically, or by some other logic? Drop-down lists with too few options On Yahoo! Share your thoughts in a comment.
The Art of Color Coordination Colors affect us in countless ways—mentally and physically, consciously and subconsciously. Psychologists have suggested that color impression can account for 60% of the acceptance or rejection of a product or service. Good color choices should never be neglected in web design. A bad color combination can have the same negative effect as poor copy and slow load times. In this infographic, we will briefly discuss color coordination and how you can use this to your advantage when designing your site. Special thanks to @speckyboy, @smashingmag and @onextrapixel. Click on the infographic below to view a larger image: View an enlarged version of this Infographic » Click here to download a .pdf version of this infographic. Want to display this infographic on your site? Simply copy and paste the code below into the html of your website to display the infographic presented above: Website Color Scheme Examples Complementary Colors – Naturestable.com Analogous Colors – Simplebits.com
The Secret to Designing an Intuitive UX Imagine that you’ve never seen an iPad, but I’ve just handed one to you and told you that you can read books on it. Before you turn on the iPad, before you use it, you have a model in your head of what reading a book on the iPad will be like. You have assumptions about what the book will look like on the screen, what things you will be able to do, and how you will do them—things like turning a page, or using a bookmark. You have a “mental model” of reading a book on the iPad, even if you’ve never done it before. What that mental model in your head looks and acts like depends on a lot of things If you’ve used an iPad before, your mental model of reading a book on an iPad will be different than that of someone who has never used one, or doesn’t even know what iPads are. Mental models have been around for a long time I’ve been talking about mental models (and their counterparts, conceptual models, which we’ll get to shortly) since the 1980s. Just how long? So what is a mental model, then?
Label Placement in Forms By Matteo Penzo Published: July 12, 2006 “We were able to subject Luke’s theories to usability testing and enrich them through the power of numeric data.” In using eyetracking to evaluate the usability of search forms for my previous article for UXmatters, “Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach,” we discovered much interesting data. I’ll provide an in-depth analysis of that data here. Please note that our ad-hoc test setup didn’t resemble real-world conditions. We based our test setup on Luke Wroblewski’s article “Web Application Form Design.” Luke provided valuable insights and feedback during both our test preparation and results analysis. During the process of building the forms that we would test, we tried to respect Luke’s suggestions regarding the relationship between label placement and formatting and the type of form content—well-known data versus unfamiliar data that requires thought. Test 1: Left-Aligned Labels to the Left of Input Fields
Pagination Gallery: Examples And Good Practices Advertisement Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. Let’s take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented. Good Practices Of Pagination Design(7 Aspects according to Faruk Ates) Related References Mistake #1: Navigation Options Are Invisible But most importantly, the navigation options should be visible. Gallery
Password strength verification with jQuery Many sites that require login credentials enforce a security setting often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken. What constitutes a strong password? In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish. Before we begin, let’s get take a sneak peak at what our final product will look like (click for a demo): Please note: The purpose of this tutorial is to show how a simple script can be written using javascript and jQuery to enforce password complexity requirements. Step 1: Starter HTML First we want to get our basic HTML starter code. <! Step 2: Form HTML Now let’s add the markup that will be used for our form. Here’s an explanation of the code we used: Here’s what we’ve got so far: Step 3: Password information box HTML Each list item is given a specific ID attribute. \d
Usability Testing: Top 8 Tips for Designing Usability Tests