1. GETTING STARTEDUSER RESEARCHUI DESIGNCONTENT STRATEGYFRONT-END DEVELOPMENT 2012 Above the Fold

2. iIntroduction27Provide lazy registration 28Take advantage of webGETTING STARTED typography1Think big picture 29Design your color palette2Connect the goals 30Provide instant feedback3Get everyone involved4Hold fewer (more relevant)CONTENT STRATEGY meetings31Tell a story5Hear every voice32Remember the microcopy6Look beyond feature requests33Learn the jargon7Design collaboratively 34Plan a content audit8Over-communicate 35Rewrite, reuse, republish9Share knowledge early 36Supplement with synonyms10 Build relationships 37Vary your medium 38Split test your contentUSER RESEARCH 39Account for edge cases11 Build personas 40Anticipate errors12 Get face time with your users13 Use paper prototypes FRONT-END DEVELOPMENT14 Test usability...online41Highlight real-time changes15 Listen to actions42Load lazily16 Vet your ideas43Build with progressive17 Choose your test wiselyenhancement18 Follow the flow 44Strategize for the small screen 45Research your UI approachUI DESIGN 46Use sprites to improve19 Prioritize top tasks performance20 Obey real-world rules 47Take advantage of HTML521 Sketch your ideas 48Organize your CSS22 Research UI patterns49Consolidate your files23 Follow the MAYA principle 50Separate CSS classes from IDs24 Document your UI patterns iiLearn more25 Use tabs effectively iii About ATF26 Reduce clutter: show actions on ivAppendix hover 3. IntroductionCreating a good user experience (UX) is often the key to a productssuccess. After all, how many customers will give a product or servicea second chance if their first experience was a bad one? If youreinvolved in creating a product, it pays to design each aspect of the userexperience so that your customers come away satisfied and delighted.Of course, UX design has many facets; trying to learn everything atonce, its easy to get overwhelmed.Thats why we wrote this eBook. Our daily work in the UX design fieldhas led us to some tried-and-true best practices that you can apply tomost software design situations, whether youre a designer, copywriter,developer, or a mix of many roles. We hope that this book will teachyou some new tricks, while reinforcing concepts youre alreadyimplementing today.Use this book as best fits your needs. Skim through it on your own;incorporate a few practices into your next project; share these tipswith your team; add them to your UX toolkit. And if you find thisbook useful, please pass it along to others as well. 4. GETTING STARTEDHow do you kick off?1Think big picture2Connect the goals3Get everyone involved4Hold fewer (more relevant) meetings5Hear every voice6Look beyond feature requests7Design collaboratively8Over-communicate9Share knowledge early10 Build relationships 5. GETTING STARTED1Think big pictureThe details of a project are clearly important. But getting too caught up in thedetails can lead to a disjointed and inconsistent user experience over time.To keep the project on track, you need a shared vision of the projects future.Start by envisioning what the experience of using the product will be like 5years from now once all the kinks have been worked out. Keep that goal inmind while working on the day-to-day elements.Document the short and long term goals early on in the process, and reviewthem daily or weekly to keep them on the teams mind.Think of the gears as the details......and the big picture as the clock all the gears need to fit together tomake the clock work. 6. GETTING STARTED 2Connect the goalsMany projects start without a clear sense of the final objectives. The basicproject goal may be known, but often the business goals and user goals are notarticulated or shared. Additionally, the goals of a company dont always playnicely with user goals. This leads to designs that either frustrate users or dontalign with business needs.The solution? Identify all goals up front, and resolve conflicts early on.Conduct interviews with stakeholders and C-level executives at the start ofa project to learn their expectations. Then compare user goals and businessgoals, to help identify conflicts and create applicable design solutions. I want...We want... The sweet spotTipFor more insight on how to balance user and business goals, read Paul Boags article Business Objectives vs. User Experience in Smashing Magazine. 7. GETTING STARTED 3Get everyone involvedStakeholders (those who are not directly working on the project every day)bring different perspectives to the goals and needs of a project.Where in the timeline do your stakeholders get involved?Kickoff WireframesUsabilityWireframesMeeting Round 1 TestingRound 2LaunchAwesome!Everyones on the same page. (See #9:Share knowledge early) for more.Excellent.Some catch-up required to bringthe stakeholder up to speed. Great. Now the stakeholder can see how users are interacting with the wireframes, and can add her feedback to inuence future rounds. Uh oh. Just when everyone thought they were on the same page, the stakeholder needs to get caught up on why these decisions were made, and her valuable feedback could mean redoing a few weeks of work.Start over! This isnt what Ihad in mind at all!Avoid the risk of having to start over by getting everyone involved as early aspossible. 8. GETTING STARTED4Hold fewer (morerelevant) meetingsMeetings get a bad rap as a time sink, an interruption from real work, or anopportunity for some boss to hear the sound of his own voice. You can add avaluable opportunity for your team to collaborate and make meetings apositive thing with just three steps: Define a detailed meeting Brainstorm landing pageWeekly check-in agenda with clear roles for allBrainstorm phase 1 involved, and clear goals. Menu discussionfunctionality Ask developers foradvice on wireframes Ask developers totalk to designers Consider who needs to attend. Include people who you need involved in collaborative discussion, but send notes later to those who just need the final decisions.Feature planning: Review creative brief Brainstorm phase 1functionality Use activities like those found in Prioritize features Gamestorming to get everyone Weekly check-in: engaged and participating. (See Review goals #5: Hear every voice.)Design review (R2): Individual updates Determine next steps Gather feedback Talk about menu Discuss initial development plan 9. GETTING STARTED5Hear every voiceProblemMeetings can be overpowered by one or two people with strong opinions and voices.Solution Use brainstorming activities to hear every voice during the opening discussions, and make a point of asking the quieter people to provide their thoughts, whether in the moment or via email later.Use 5-Finger Voting to determine group priorities. Tip Dave Grays Gamestorming book is filled with group collaboration ideas, and new ones appear regularly on the Gamestorming website. 10. GETTING STARTED 6Look beyond featurerequestsWhen users start requesting features, take a step back and ask: What is theproblem they are trying to solve?For each feature request a user makes, identify the problem; from here you canbrainstorm a well-considered solution. Even in the case where the userssuggestion is the best solution, you still gain better understanding of yourcustomer and their needs.Can you ensure first-timeCan you add a tutorial on users will understand how tohow to use the app?use the app?What users say What users really meanTip Keep your usability tests going regularly to keep the feedback loopopen and continuous. 11. GETTING STARTED 7Design collaborativelyCollaboration requires a little extra time, but can vastly improve the overalldesign of the application if done effectively.For example, the first round of wireframes is as much about discovering thebest flow as it is designing the screen layouts, so its a great time to get yourteam brainstorming.TipGive the room 30 seconds to write features on sticky notes. Then, as a group, decide what features belong together, and watch the screens take shape. 12. GETTING STARTED 8Over-communicateWhat would happen if you were hit by a bus? Or, less drastically, what happensduring a team disagreement about a past decision, when no one has awritten record? Email recaps and regular check-ins feel like a huge waste of time when everythings going smoothly, but on complex projects, having a written record of team decisions and keeping everyone up-to-date regularly can prove invaluable. To save time, ask the team to spend 15 minutes at the end of each day to send out a recap of all decisions that influenced their work, or to bring a brief recap of their progress to any check-in meetings. The whole team will benefit, as misunderstandings can be caught earlier in the process. And should anyone need to call in sick, there will be a written record of where they left off work. 13. GETTING STARTED 9Share knowledge earlyTraditional design specification (spec) documentation requires a lot of effort,and it frequently cant keep pace with design and functionality changes.Shared understanding brings together multiple perspectives and sheds light onpossible snags early in the process.[Designers] are in the problem-solving business, and [they] dont solveproblems with design documentation. [They] solve them with elegant, efficientand sophisticated software. Jeff Gothelf, Lean UXMonth 4Day 1Shared n Spe c understanding!DesigvsDeveloper Developer DesignerTip See #8 (Over-communicate) for more information on where and howdocumentation can be beneficial. 14. GETTING STARTED 10 Build relationships True or false? Everything you need to know about your users you can learn from analytics. False. Analytics are important, as are the results of any quantitative tests, but the best companies are built on relationships. By focusing on your customers and getting to know them as individuals, youll not only build brand loyalty, youll also be able to improve your product with a steady supply of persona details (see #11: Build personas), usability testers, and users to interview.Tech savvy Tech savvy Grew up in many states Grew up in many states 27% bounce 27% bounce raterateStudied biology Studied biology12.3242% 12.3242%Explores new citiesExplores new cities45 views per 45 views per monthmonth Listens toEats toListenssweets sweets Eats 75% male 75% maleLikes joggingLikes jogging325,090 clicks 325,090 clicks Plays piano piano2 kidsHas 2 kidsPlays Has 13.902%13.902%$4.93$4.93#000325301 #000325301 Edward 15. USER RESEARCHLearn what your users know11 Build personas12 Get face time with your users13 Use paper prototypes14 Test usability...online15 Listen to actions16 Vet your ideas17 Choose your test wisely18 Follow the ow 16. USER RESEARCH 11Build personasMike Jones manages products at Company X. His goal is to find the right audiencefor his product, and he learns about his audience through online forums and byinterviewing users.He has a team of two subordinates who help him collect and analyze data on theiraudiences. He holds weekly check-ins with his team, and is rigorous in sendingfeedback and updates.This is an excerpt from a persona.Personas are created throughinterviewing multiple individuals inthe same position, and compilingtheir personalities, needs, challenges,and expectations into an imaginaryuser. Through developing personasyour team can identify and prioritizethe specific goals of your targetaudience.TipAfter building your personas, put them to work prioritize features according to what your personas need. Its easier to make decisions for a specific user (or persona) than for a generalized audience. 17. USER RESEARCH12Get face time withyour usersEvery product developer knowshis market, but without userresearch he often lacks concrete datafrom which to form personas orprioritize features. Just rememberthis mantra:A little face time is better thannone at all!User research can take many forms,including surveys, interviews,ethnographic studies, and usabilitytesting so do whatever you can,trying some of each if possible.Tip If you dont have access to users in your target market, go to yourlocal coffee shop and offer gift cards in exchange for quick usabilitytests. Its surprising what insights you may gain! 18. USER RESEARCH 13Use paper prototypesDesign debates arise with any team; luckily most can be resolved with a paperprototype. Paper prototypes involve the same components as otherprototypes: screens, users, interactions everything but the computer!1 Sketch the screens for the interaction you want to test, including buttons,modal windows, and other interactive pieces.2 Ask an objective person to act as the user.3 As the user clicks on the screen, act as the computer, simulatingactions and interactivity. Your team members can observe successes andstruggles, as in a traditional usability test. This paper usability test offers immediate feedback in several ways: The team will receive clear,real-time feedback, solvingdesign debates. Youll discover insights that noone thought of previously. Your objective user will provideyou with a new perspective.Tip If possible, find a user who fits your target audience. At the very least, usesomeone who hasnt seen or heard about the in-progress application. 19. USER RESEARCH14Test usability...onlineProblemTraditional usability testing can become cost prohibitive, time consuming, and challenging to execute.Solution Traditional usability testing is not the only way to catch the sticking points in your application. If youre pressed for time or short on funds, you can use an online service such as UserTesting.com or Loop11 for quick and dirty feedback within days. Keep in mind that this solution works best when youre testing an application among general users rather than specific target audiences. Loop11 gives the user a simple way to complete usability tasks. Tip Use an online service for your regular monthly testing, but conduct the targeted, in person usability testing when rolling out new features or making major updates to the UI. 20. USER RESEARCH15Listen to actionsDuring a usability test, users are asked to share their thoughts as they go.Sometimes they state a strong opinion, but their actions dont match.It is up to your team to observe their reactions and behavior, rather thanfocusing on the spoken statements. In particular, any time you hear a user sayI would do X... take it with a grain of salt.Help users along by asking them to talk about the decision making process,and what they think as they choose their course of action through yourapplication. Listen to what they say, but pay closer attention to what they do.This area here?No... I wouldntclick on that. click 21. USER RESEARCH16Vet your ideasAny entrepreneur can tell you that life isnt fair: no sooner do you come up witha brilliant idea, than you need to prove its worth. Will users be interested in it?Is it worth being funded? Will it hit your target market?Startups know the story well: withouta way to validate user interest,funding can be hard to come by andyou can spend months or even yearsspinning your wheels. But now thereare online services that measure user IDEA IDEAIDEA IDEAinterest, and help you learn moreGAUGE GAUGE about your target market by enticing USER USER INTEREST INTEREST your potential users to sign up forupdates and more information! BUILDBUILDBUILDBUILDLAUNCHLAUNCH LAUNCH LAUNCH The Internet provides many places to vet your ideas.Tip Try LaunchRock, for one. 22. USER RESEARCH 17Choose your test wiselyWhich test is right for your needs? 23. USER RESEARCH18Follow the flowUsing Custom Variables in Google Analytics will help you segment yourcustomer base and track where customers navigate to in your application.1Set a custom variable whenever you sign up a new customer.2View the Visitor Flow report in Google Analytics to see the flows your customers are following.3Cross reference the report with your expected navigation flow. If the two dont align, then its time to rethink terminology or redesign the page where users are stumbling.TipTake a look at the Custom Variables setup guide from Google Analytics. 24. UI DESIGNDesigning with data 19 Prioritize top tasks 20 Obey real-world rules 21 Sketch your ideas 22 Research UI patterns 23 Follow the MAYA principle 24 Document your UI patterns 25 Use tabs effectively 26 Reduce clutter: show actionson hover 27 Provide lazy registration 28 Take advantage of webtypography 29 Design your color palette(but not from scratch) 30 Provide instant feedback 25. UI DESIGN19Prioritize top tasksSet one primary goal for your users on each screen. If you have multiple goalsin mind, identify the primary goal by asking these questions:Who is my ideal audience?Where do I want to send them on my application/site?Whatcall to action will best direct users to the primary goal?How do the secondary goals relate to the primary goal? (You may findthat your secondary goals are so unrelated that they deserve aseparate page altogether!) How many goals do I havealtogether? Are they all for the same audience?Prioritizing is much easier once you know your audience and their goals. Witha little prioritization, your screens can become cleaner, crisper, and far morecommanding. 26. UI DESIGN20Obey real-world rulesEven if you dont favor faux-real interfaces like Apples iBooks, almost everyinterface you design will take some cues from real-world physical effects likelighting and perspective. Make sure those effects are applied consistently andsensibly; otherwise its easy for users to become disoriented.For example, if your buttons have a highlight along the top edge, and agradient that darkens at the bottom, that implies a light source shining fromabove. Dont switch it up and include other elements on the same screen thatlook like theyre lit from below.Apples iBooks app uses realistic lighting to depict a bookshelf. TipLooking for more details? Check out the chapter on visual principles inStephen P. Andersons book, Seductive Interaction Design. 27. UI DESIGN 21Sketch your ideasDont be afraid of sketching! A quick drawing is often the best way to visuallyarticulate goals and requirements, and you dont need art classes to do it.SimpleMost interactions can be represented by simple rectangles,circles and triangles.Complex Digital tools such as Balsamiq, Mockingbird, and Omnigrafflecome pre-loaded with basic shapes, text tools, form elementsand annotation graphics. 28. UI DESIGN22Research UI patternsWhen you need to create a new piece of UI functionality, its best to do someresearch first, to find out if someone else has already solved the problem youare facing.Many sites exist to showcase UIpatterns (reusable widgets that solvecommon problems) such aspagination, tabs, or facetednavigation.In addition to saving you time andeffort, UI patterns make use ofexisting conventions. Since thesepatterns are already familiar to users,they are usually preferable from a UXperspective, no matter howinnovative your prospective newsolution might be.UI-Patterns.com shows examples of pagination. Tip UI-Patterns.com, PatternTap, and the Yahoo! UI Design Pattern Library are some examples of well-maintained UI pattern galleries. 29. UI DESIGN 23Follow the MAYA principleProblemYou can only raise the bar as high asyour audience will let you; deliver anexperience thats too far from whattheyre comfortable with, and theyllwalk away.SolutionMAYA (Most Advanced, YetAcceptable) is a maxim to live by.Designers and innovators mustpave the way toward the future,but in gradual stepsdeliveringexperiences that break new ground,but still contain enough of the familiarto be acceptable to the people forIf computers existed before anyone couldwhom theyre designed.understand them, no one would use them.TipUser interviews will help you to understand the daily life of the people for whom youre designing, and give you insight into what will be acceptable to them. Read Jim ONeills article Deliver the Future, Gradually to learn more about the MAYA principle. 30. UI DESIGN24Document yourUI patternsDoing something right once savesyou the trouble of needing to doit again. So when you build a UIwidget that you (or others on yourteam) may want to reuse, dontkeep it hidden put it somewherethat everyone can find it when theyneed to.Create a UI pattern library foryour project a living document(preferably in code) that compilesall the reusable patterns youhave created, making them clearand easily available to everyoneon the team, and to people whojoin in the future.Your library could be as robustas Bootstrap (see right), ormuch simpler, depending onBootstrap, from the folks at Twitter, is a publicly-your needs. available UI pattern library. 31. UI DESIGN25Use tabs effectivelyTabs are a sorely misunderstood UI element. They are frequently employed as anavigation device, even in such popular places as Amazon.com or in theSystem Properties of your PC. Rarely are tabs used to do what they do best:alternating between views.The debate rages on over whether or not tabs-as-navigation is actuallymisuse, but it can easily become overused. By following Jakob Nielsens13 Guidelines for Tabs, you can ensure your tabs stay in their rightful place. Tip You can use UI pattern galleries to explore alternatives to tabbed navigation (such as scrolling, sidebar navigation, or dropdown menus). 32. UI DESIGN26Reduce clutter: showactions on hoverWhen each row in a data set or table contains a set of actions (such as editand delete) the table can become cluttered.Clean up the interface by only showing those actions when the user hoversover the row with her cursor.Basecamp shows Edit, Delete, and Move action icons when hovering over each item in a to-do list. TipHover doesnt work for mobile devices. Instead, consider cuttingdown functionality to allow only the basics, or filter the functionalityinto a few different pages. 33. UI DESIGN 27Provide lazy registrationYou wouldnt buy a car without taking it for a test drive. However, when youask users to create an account before giving them a chance to use your service,you are asking them to do just that. This approach can scare people away fromusing your product.Instead of asking for an immediate sign up, let users enjoy the service first,and then provide them a way to save their information and lazily createan account.Grooveshark lets you create playlists, but to save them you must register. TipTo make sign-up even lazier, allow integration with other platformssuch as Facebook, Twitter, and Google+. 34. UI DESIGN28Take advantage ofweb typographyThere was a time when Arial, Verdana, Georgia, Trebuchet and Times NewRoman were the only fonts available to web designers. Putting text into imagesprovided more options, but at the cost of SEO and accessibility.Today, web typography is emerging as a solution. TypeKit and Google WebFonts, among others, allow designers to use a wide range of fonts while leavingthe text in HTML, where it can be read by search engines and screen readers.TypeKit allows you to browse and try various typefaces. TipWith great power comes great responsibility. Be judicious withtypography choices to preserve the aesthetic of your websiteor application. 35. UI DESIGN29Design your color palette(but not from scratch)When you need to create a color scheme for your new product or application,dont just make it up as you go along. Instead, take the time to plan out apalette, but design smart: start from a pre-made palette and tweak as needed.Some tools to get you started include:Adobe Kuler for DesignersColor Scheme Designer21 Stimulating Color Palette ToolsAdobe Kuler offers a constantly-updating library of color palettes. TipWhatever color scheme you design, include one or two neutraltones for the text-heavy areas. 36. UI DESIGN30Provide instant feedbackForm fields should be designed with the best possible user experience in mind:1Fill out a form.2Receive an alert Something on this form is incorrect!3Give up and go home.Wait. What? Lets try that again1Fill out a form, and see clear indicators of whether your information is being accepted.2Correct errors quickly as you go.3Success!The example above provides a checkmark icon for correct fields and a warning icon with a message forinvalid entries.TipUse JavaScript animations to make form field interactions friendly and fun. Example: Tumblrs sign up form box shakes to indicate incorrect field values (like a password thats too short). 37. CONTENT STRATEGYTell a story to create context31 Tell a story32 Remember the microcopy33 Learn the jargon34 Plan a content audit35 Rewrite, reuse, republish36 Supplement with synonyms37 Vary your medium38 Split test your content39 Account for edge case40 Anticipate errors 38. CONTENT STRATEGY31Tell a storyStorytelling has been a compellingform of knowledge transfer sincebefore the written word.From Plato to Steve Jobs, fairytales tobusiness pitches, stories are an integralpart of content strategy.When you tell a story you engageyour users. It can be the story of ajourney, or a lesson learned, or atriumph, or a challenge, or nostalgia,relaxation, achievement, or manyother possibilities.It can be told through the colors youchoose, through any medium, and inmultiple ways.By telling a story, you put your productin context and give meaning to yourusers. 39. CONTENT STRATEGY 32Remember the microcopyMicrocopy refers to the tiny snippets of copy that often appear near form fieldsand inside complicated processes. These provide contextual help, clarification,or reassurance at moments of potential confusion.We tend to overlook the possibilities for good copy on adetailed level, as well as the reality that users are often one(preventable) hesitation away from abandoning a form, application,or site altogether. Make sure that your content team takes the time to gothrough each form page and identify opportunities for helpful microcopy!Tip Usability testing is very effective at uncovering spots in an applicationwhere microcopy would be useful its often painfully easy to seewhere users hesitate or go wrong due to confusion. 40. CONTENT STRATEGY 33Learn the jargonWere not talking about business jargon unless your target users arebusinessmen. The people who use your product have a language all theirown. When you learn to speak their language, you can ensure your applicationdoesnt miss the mark.chaitriple-shot espresso Starbucksbrownie grande baristacoffee caffeine frappuccino venti Starbucks customers and employees share a certain specialized language.Tip Interview your users and listen to how they express themselves,so you can match their tone. (See #12, Get face time with your users.) 41. CONTENT STRATEGY 34Plan a content auditA content audit is a critical part of building or redesigning any complexapplication or site. Planning and organizing your content audit can be as easyas 1-2-3:1 Set up a spreadsheet with sections for Screen, Attribute, Messaging, Callto Action, Audience, and Notes2 Consider each attribute on each screen (Attributes include headline, subheader, paragraph text, image, video) and the relevant messaging.3 Use the completed spreadsheet to help make decisions on what contentto keep, and then track the creation of new content. 42. CONTENT STRATEGY 35Rewrite, reuse, republishCreating quality content can be a lot of work. Writing social media updates,blog posts, forum discussions, site content, and videos in a consistent voice ona regular basis can cause burnout. So what do you do? Rewrite, Reuse,and Republish.Quote your website. Make a blog postinto a video. Make a discussion intoRewritea SlideShare by adding images toillustrate the main points. Quoteblog posts as forum responses.blishWith some savvy marketing, aRelittle content can go a long way. uuspeReTipFor more suggestions on reusing content, view Barbra Gagos slideshare, 15 Ways to Distribute Content. 43. CONTENT STRATEGY 36Supplement withsynonymsProblem Different people use different terms when they think aboutyour product even members of your target audience willinterpret one word in multiple ways. Ensuring that users canuse different words to find what theyre looking for on yoursite is a content strategy challenge.SolutionCreate a taxonomy! By writing up a list of synonyms for eachimportant term relating to your company, product, andapplication, you will learn to identify with different segmentsof your audience. Once you have a basic taxonomy, all futurecontent will come together much more easily.A sample taxonomy used by Above the Fold. Tip Read Heather Heddens article, Better Living Through Taxonomies for a more detailed explanation on taxonomies. 44. CONTENT STRATEGY 37Vary your mediumContent is more than just copy! Consider where your audience spends time,and how they access information.If your audience tends to surf the web online during work hours, they mayfind a blog post more helpful than a noisy video. Or if you have a particularlycomplex piece of information to get across, an infographic can help clarify it.Text AudioSketchGraph VideoPhotoVideo Text SketchAudio AudioPhoto Sketch Text VideoGraph 45. CONTENT STRATEGY 38Split test your contentAfter creating new content, instead of simply replacing your old content,conduct an A/B split test to see which delivers better results in the real world.In a split test, each user is served one of the two versions at random, withoutknowledge of the other one. Users behavior on each of the versions can thenbe tracked and measured. 45% 35% A B Version AVersion BConversion RateTipTools like Google Website Optimizer can help you automate the testing process, allowing you to run tests easily by installing a simple tracking code. 46. CONTENT STRATEGY39Account for edge casesEdge cases are a reality in every design. When dealing with a databaseapplication, understanding the real data that goes into the system is key toidentifying potential edge cases which can cause the application to break.Provide your team with real or simulated data early in the design process.With actual data (not lorem ipsum or filler data), the team can see how theinterface might break if the design doesnt accommodate the edge cases. Address Address 1234 Lorem Ipsum Street 686 Massachusetts Ave, Suite 304, 1234 Lorem Ipsum Street Cambridge, MA 02139 1234 Lorem Ipsum Street 9674 Broad St, Chicago, IL 60625 1234 Lorem Ipsum Street 31 Spooner Street, 1234 Lorem Ipsum Street North Kingstown, RI 02852While designers should design for the most practical use cases first, these edgecases cant be ignored. The more complex the application, the more edgecases need to be considered.TipCheck out Luke Wroblewskis interview series with designers who give their perspective on edge cases. Struggling with edge cases? Ask your development team for some help interpreting the content and structure of your databases. 47. CONTENT STRATEGY 40Anticipate errorsWhich of the following two error messages makes you feel confident about thewebsite youre visiting?Considering the user experience includes considering how we present the userwith error messages. Detailed and appropriate (and sometimes even humorous)copy helps the user to move forward.As your team designs the application, think through the possible errors a usermight encounter at each step of the process. Then craft a response or solutionfor that error to help the user get back on track.Tip Ask developers to provide a list of error messages, along withcontext such as when users will see those messages. Then you cancreate new error message copy appropriately. 48. FRONT-END DEVELOPMENTBuild a strong base41 Highlight real-time changes42 Load lazily43 Build with progressive enhancement44 Strategize for the small screen45 Research your UI approach46 Use sprites to improve performance47 Take advantage of HTML48 Organize your CSS49 Consolidate your les50 Separate CSS classes from IDs 49. FRONTEND DEVELOPMENT 41Highlight real-timechangesFailing to notice changing information has consequences. When you fail tonotice a friends haircut, you only risk social embarrassment. But when a userfails to notice information that just updated on a page in your application, theconsequences are more dire she may not know what to do next, and you maylose her as a customer.Build in visual cues to draw attention to information that has just changed. Hereare some ways to transform the text on your page: Change the background color surrounding the item in question Change the font color or font weight Consider adding in some animations, either via CSS3 or JavaScriptTodoist briefly highlights text that was just added. Tip Regardless of your choice of transformation, you can graduallyfade the effect back to normal to signal to the user to continue on her journey. 50. FRONTEND DEVELOPMENT 42Load lazilyProblemTraditionally loading pages allowsall the data to load before anythingappears onscreen. This often leavesusers waiting, which nobody likes.SolutionUse lazy loading: get all the staticpage elements loaded first, and thenload the immediately visible data. Asthe user scrolls down, more elementscan load, progressively. 51. FRONTEND DEVELOPMENT43Build with progressiveenhancementAnyone with an older Internet-enabled phone has encountered the majorproblem with graceful degradation. Older devices and browsers cant handlenew features and interactivity, and it is often painfully clear that features aremissing, because older devices were a low priority.When a user can tell that they are missing out on features because thedevelopers didnt bother, thats a bad experience and a preventable one.To provide a good experience foreveryone:1Focus on content first. Build a basic experience that everyone can access, which delivers your content in a clear, readable way.2Apply the visual presentation next, for devices that can handle it.3Layer the interactivity on top, for those capable devices.This approach, done right, leaves noone behind.TipFor more on progressive enhancement, read Aaron Gustafsons article in A List Apart, or Filament Groups book on the subject. 52. FRONTEND DEVELOPMENT 44Strategize for thesmall screenThe use of mobile devices for browsing the web is so prevalent, every singlewebsite and application should be usable on a small screen. But far too manyarent, either due to lack of understanding or lack of resources.If your organization doesnt have the resources to design a full mobile solution,you can still achieve mobile-friendliness quickly and easily.Consider using CSS media queries to make a few small layout and navigationadjustments for smaller screens, or fall back on a nicely-designed text-onlystylesheet if you need to. These considerations need to be on your radar,especially if you dont have buy-in to go forward with a full-scale mobile effort.TipGet started with Responsive Web Design by reading Ethan Marcottes article on A List Apart. 53. FRONTEND DEVELOPMENT45Research yourUI approachWhich UI development approach is better for you: programmatic ordeclarative?ProgrammaticDeclarativeDevelop the UI in code.Create the UI in markup. Can be harder to learn, read andMay not provide muchunderstand.out of the box functionality. UI is coupled with your code. Flexible -- often the better choice.Ultimately, the best choice for you depends on your application and your team.Evaluate the pros and cons of each approach before making a final decision.A programmatic Hello World app in Sencha. A declarative Hello World app in HTML/jQuery. 54. FRONTEND DEVELOPMENT46Use sprites to improveperformanceProblemLoading a separate file for everyimage, especially when your site hasmore than 50 icons, can generatemany HTTP requests and slows downyour sites load time.SolutionCreate a sprite a single graphic filecontaining all 50 icons, each spaceda certain distance apart and save itAmazon uses compact sprites for their button states.as a single image (PNG, JPG or GIF).Use background-image positioning inCSS to display only the icon you needin any given instance.Tip The CSS Sprite Generator is one of many tools that create spritesfor you automatically. You can read more about sprites on CSS Tricks. 55. FRONTEND DEVELOPMENT47Take advantage of HTML5Did you know that HTML5 provides many new input types? Browsers on mostsmartphones and tablets often change the virtual keyboard layout based onthe input type in a way that saves users time and frustration.New field types include:urldatenumbersearchemailmonth range teldatetime weekcolor timedatetime-local TipIf youre worried about browser support, never fear. Browsers ignoreany input type they dont understand and render it as a normal . 56. FRONTEND DEVELOPMENT 48Organize your CSSApplying a standard organization plan to your CSS code will prevent it frombecoming bloated and disorganized, as is all too common in large projects.Use comments to create headings for different sections of the document, and comment liberally throughout the file.Include a table of contents within comments at the beginning of the file, listing all the different sections in order.To make searching within a CSS file fast and easy, precede each heading with a search flag a special character that is uncommon in CSS code, such as an equals sign (=). For example, if the page layout styles are in a section named =Layout, then you only have to search for =La to jump directly to that section. 57. FRONTEND DEVELOPMENT49Consolidate your filesMaintaining a set of well-commented CSS and JavaScript files that areseparated according to their purpose is great for development, but slows downperformance on a production website or application. How can you consolidate?As part of your standard process for pushing code to the production site,merge all CSS into one file and all JavaScript into another file. Then minify thecode by stripping out all extraneous comments and white space. This canresult in significant performance savings, due to smaller file sizes and fewerHTTP requests.TipConsolidation and minification can be done automatically using a tool such as Minify. 58. FRONTEND DEVELOPMENT50Distinguish CSS classesfrom IDsCombining CSS selector types without a structure produces messy,unmanageable code. Keep your selector types in line with a general guideline.Use CSS classes (e.g. .page-title) to apply visual styles. This works wellbecause classes are infinitely combinable and they cascade easily.Use IDs (e.g. #cta-donate) mainly to pinpoint specific elements in the DOMin order to trigger interactive behavior. This is great for performance, since thebrowser can find an ID faster than it can find a class name.TipPlan how to structure your markup in advance, but accept that every situation is unique and that you will encounter exceptions. 59. Learn moreWe hope the tips in this book give you a good starting point for improving yourUX. If you find you have more questions on user experience, best practicesor anything relating to this book, contact us! We love conversation and werehappy to help with all your UX needs.Questions or comments? Above the Fold is located at:Get in touch with ATF: 686 Massachusetts Ave, Suite 304 Cambridge, MA 02139 Web: www.abovethefolddesign.com Email: hello@abovethefolddesign.com Email usVisit usVisit us on Facebook:Did you like this eBook?www.facebook.com/abovethefoldShare it with your friends:Follow us on Twitter:www.twitter.com/abovethefold Share us Tweet us 60. About ATFAbove the Fold is a user experience design agency that values people that means you, our customers, and your customers too.From the first consultation through the final line of HTML, our teamdelves into your goals and your users needs to create a customdesign solution for your business. Each project is more than just a setof deliverables; its a chance to create long-lasting relationships foryou, your customers, and us. 61. AppendixWeb resources in this eBook2Business objectives vs. user experience: http://uxdesign.smashingmagazine.com/2011/02/04/business-objectives-vs- user-experience/5Gamestorming website: http://www.gogamestorm.com/9Lean UX: http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the- deliverables-business/14 UserTesting.com: http://www.usertesting.com Loop11: http://www.loop11.com16 LaunchRock: http://launchrock.com/18 Custom Variables setup guide: https://developers.google.com/analytics/devguides/collection/gajs/ gaTrackingCustomVariables20 Seductive Interaction Design: http://www.amazon.com/Seductive-Interaction-Design-Effective-Experiences/ dp/0321725522/21 Balsamiq: http://builds.balsamiq.com/b/mockups-web-demo/ Mockingbird: https://gomockingbird.com/ OmniGraffle: http://www.omnigroup.com/products/omnigraffle/22 UI-Patterns.com: http://www.ui-patterns.com PatternTap: http://www.patterntap.com Yahoo! UI Design Pattern Library: http://developer.yahoo.com/ypatterns/23 Deliver the Future, Gradually: http://www.uxbooth.com/blog/deliver-the-future-gradually/24 Bootstrap: http://twitter.github.com/bootstrap/components.html25 13 Guidelines for Tabs: http://www.useit.com/alertbox/tabs.html26 Basecamp: http://basecamp.com/ 62. Web resources in this eBook, continued27 Grooveshark: http://grooveshark.com/28 TypeKit: https://typekit.com/fonts29 Adobe Kuler for Designers: http://kuler.adobe.com/ Color Scheme Designer: http://colorschemedesigner.com/ 21 Stimulating Color Palette Tools: http://www.sitepoint.com/21-stimulating-color-palette-tools-for-designers/30 Tumblrs sign up form box: https://www.tumblr.com/35 Barbra Gagos slideshare, 15 Ways to Distribute Content: http://www.slideshare.net/LeftBrainDGA/15-ways-to-distribute-content36 Better Living Through Taxonomies: http://www.digital-web.com/articles/better_living_through_taxonomies/38 Google Website Optimizer: https://www.google.com/websiteoptimizer39 Luke Wroblewskis series of interviews: http://www.lukew.com/ff/entry.asp?55441 Todoist: http://www.todoist.com43 Aaron Gustafsons article on progressive enhancement: http://www.alistapart.com/articles/understandingprogressiveenhancement/ Filament Groups book on progressive enhancement: http://filamentgroup.com/dwpe/44 Ethan Marcottes article on responsive web design: http://www.alistapart.com/articles/responsive-web-design/45 Pros and cons of each UI approach: http://candanny.wordpress.com/2011/08/14/declarative-vs-programmatic-in- javascript-mobile-app-frameworks/46 CSS Sprite Generator: http://spritegen.website-performance.org/ CSS sprites explained on CSS Tricks: http://css-tricks.com/css-sprites/49 Minify: http://code.google.com/p/minify/