background preloader

Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right

Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right
by anthony on 05/25/11 at 11:30 pm Designers often question where to place their ‘Ok’ and ‘Cancel’ buttons on dialog boxes. The ‘Ok’ button is the primary button that completes the task action. The ‘Cancel’ button is the secondary button that takes users back to their original screen without completing the action. Platform Consistency Is Not Good Enough Many have referred to following platform conventions as the answer. “Consistency” is a popular word used among designers. What if a certain design convention is harmful to users? There are certain platform design conventions that are widely used today because they work for users. Button Placement Matters One could argue that making your action buttons prominent by giving it more visual weight and a clear and distinct label is more important than its placement. To only focus on one design aspect and not the others is an act of a careless designer. Why ‘Ok’ Buttons Work Best on the Right Less visual fixations Conclusion Our Products Affiliates Related:  Design

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.

Informations Télécharger le spécimen en Pdf Le spécimen se compose d’un livret de 48 pages qui présente le caractère INFINI accompagné du texte de Sébastien Morlighem « L’histoire de l’Infini ». Il est édité par le Centre national des arts plastiques et imprimé à 3 000 exemplaires. Il est également téléchargeable en pdf en deux versions : la version écran, qui reproduit intégralement la version papier ; la version pour l’impression, sans aplats de couleurs pour une impression économique. Version écranVersion pour l'impression Pour installer l’Infini sur son ordinateur L’installation du caractère Infini sur ordinateur Mac ou PC est particulièrement facile. Après avoir téléchargé le dossier Infini-cnap-fontes-specimen-x.xx.zip ouvrez-le et cliquez sur le fichier Lisez-moi.pdf. Télécharger le caractère Pour installer l’Infini sur un site internet Facile ✌ Coller la ligne de code suivante dans la section <head> de votre site. Intégrer le caractère dans votre CSS. font-family: 'Infini', sans-serif; Avancée ♕

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

Faut-il abandonner les menus façon hamburger ? - SimpleWeb.fr Voilà presque 7 ans que l’iphone a été mis sur le marché. Sept années au cours desquelles les éditeurs se sont arraché les cheveux pour adapter leur site web aux contraintes des smartphones. Au fil des années les concepteurs se sont rapidement rendu compte qu’il n’y aurait jamais assez de pixels pour afficher un menu de navigation digne de ce nom et qu’il fallait donc s’en passer. Assez rapidement, un consensus a été trouvé autour d’un symbole abstrait en forme de hamburger. L’origine de ce symbole remonterait au PARC et désignerait une liste ou un empilement d’items (Who Designed the Hamburger Icon?). Le problème est que ce pictogramme pose des problèmes d’interprétation. Les auteurs de ces articles sont unanimement tous d’accord pour dire que « la forme suit la fonction« , qu’il ne faut surtout pas « enfreindre le modèle mental des utilisateurs » et que comme le rappel Dieter Rams, « Good Design Makes A Product Understandable« . La justification de ces choix est la suivante :

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.

Bien choisir vos polices de caractères - Wix.com Les polices de caractères ne servent pas uniquement à offrir du style (ou du caractère) à vos textes. Elles influencent leur interprétation, déteignent sur votre expérience utilisateur et, de manière générale, installent l’atmosphère de votre site. En d’autres termes, elles font partie intégrante de votre message. Si vous n’avez pas besoin d’être un génie de l’informatique pour créer un site avec Wix, avoir quelques notions en graphisme pourrait bien vous être utile. Cette semaine, nous vous donnons 8 conseils pour choisir et utiliser vos polices de caractères. À suivre à la lettre ! Quelle est votre identité visuelle ? Nous vous avons déjà expliqué comment définir l’identité de votre marque. À qui vous adressez-vous ? De la même façon que vous vous adressez à l’oral différemment à des seniors ou à des adolescents, votre choix typographique variera en fonction de votre audience. Quel est votre objectif ? Serif ou Sans Serif ? Et votre site dans tout ça ? Etes-vous lisible ? Vaste question !

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?

Hot Ideas! For using Images in Presentations.

Related: