user experience tips and tricks for developers

1 User Experience Tips and Tricks for Developers User Experience User experience is everything. UX UI; UX Usability UX encompasses all aspects of the end-users interaction with the company, its services, and its products Its all about how users feel and whats going on in their brains Aspects of a Great User Experience: Meets the need of the customer Easy to use Enjoyable to use Simple Elegant Alignment The Principle of Alignment The placement of elements such that edges line up along common rows or columns, or their bodies along a common center In other words, dont randomly throw things on a page. All elements should be purposely placed, and should relate to other elements on the page. Summary: Subtle can be powerful Be purposeful Be strong Visually connect elements Proximity The Principle of Proximity Elements that are close together are perceived to be more related than elements that are farther apart In other words, group related items together. And if theyre not related, dont group them. Summary: Subtle can be powerful Purpose is to organize Group related items Limit the number of objects Consistency/Repetition 2 The Principle of Consistency/Repetition The usability of a system is improved when similar parts are expressed in similar ways In other words, being consistent with elements such as fonts, spacing, bolding, colors and so forth will help unify your design and make it stronger. It can also help your users identify special or important things on the page. Finally, it can add visual interest to a page, which makes users more likely to read or use it. Summary: Unify Add visual interest Show relationships Signify special elements Contrast The Principle of Contrast Users will notice and remember elements that stand out In other words, you should help your users understand whats important on a page. Using contrast can create visual interest, and it also helps with organization which includes an important concept called visual hierarchy. Four ways to show contrast: Color / Shape / Size / Position or Orientation When using any of the four techniques, be BOLD. Summary: User will notice and remember Adds visual interest and organization Color/Shape/Size/Position or Orientation Dont be wimpy Color Color is used in design to attract attention, group elements, indicate meaning and enhance aesthetics The color wheel Red/Blue/Yellow: Theyre called primary colors because you cannot mix any other colors to create them. Then, secondary colors Colors that are opposites on the color wheel are complementary colors; Three colors that are equidistant from each other on the color wheel are triads; Combination of two or three colors right next to each other are analogous colors; Cool colors have blue in them, warm colors have red or yellow in them; Hue, a pure color; Shade, created by adding black to a color; Tint, created by adding white to a color; Summary: A complex topic The color wheel will take you far 3 Use and combine colors purposely Colors are powerful Typography Typography is what language look like. Categories of type: Serif / Sans Serif / Script / Decorative Characteristics of Serif Fonts: Classic / Traditional / Embellished Characteristics of San Serif Fonts: Modern / Minimalist / Clean Characteristics of Script Fonts: Handwritten / Calligraphic / Fancy Characteristics of Decorative Fonts: Fun / Unique / Expressive Web-Safe Fonts Font Family Comments Arial Sans serif Well liked, but getting old. Use at size 10 or higher. Comic Sans MS Sans serif Fun, informal. Use sparingly. Can be hard to read. Courier New Monospace Commonly used to show code. All characters same horizontal size. Georgia Serif Best serif for web use. Impact Sans serif Good for headings and contrast. Lucida Sans Sans serif Very legible. Palatino Linotype Serif Good for print and online. More liked than Times New Roman. Tahoma Sans serif Legible and readable. Times New Roman Serif Not well liked. Best reserved for print. Trebuchet MS Sans serif Modern, legible, readable. Verdana Sans serif Very readable online and very well liked. Can be used at small sizes. General Guidelines for Typography: Communication and clarity are most important Keep contrast high Limit the number of fonts, and use consistently On the web, use web-safe fonts Use size 10 or larger Use ALL CAPS sparingly Design for copy-and-paste Summary: Serifs and sans serifs are usually the two choices; When combining, be intentional; Use web-safe fonts for the web; Stick to the guidelines Visibility 4 The usability of a system is greatly enhanced if elements are clearly visible to the user Meaning that if you expect your users to use your system, they have to be able to see the things you want them to see! Three Major Concepts of Visibility: The “fold“ / Scrolling / Banner blindness What users DO look at: Plain text / Faces and body parts / Unusual things Summary: It seems obvious, but is often overlooked Key elements should be above the fold Make your pages scrolling-friendly Dont make things look like ads Understandability Shared Reference The person who made the thing and the person who use the thing both understand it to have the same meaning In software, understandability is all about shared references. Summary: Understandability is the key Shared references bring Language, images/icons and sounds Try to think as your users, and anticipate their questions Simplicity Elegance is not the abundance of simplicity. It is the absence of complexity. Simple: elegant / expensive / professional Space is like air. It is necessary for a design