Your SlideShare is downloading. ×
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A Developer’s Guide to Interaction and Interface Design

675

Published on

A presentation I gave to the Girl Develop IT meetup group in Ottawa on March 27, 2012.

A presentation I gave to the Girl Develop IT meetup group in Ottawa on March 27, 2012.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
675
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Developer’s Guide to Interaction and Interface DesignToronto | Ottawa | Calgary | Regina | New York 1
  • 2. Today’s Agenda1. Introduction2. Section 1 Who’s Your Audience? Visual Design General Design Guidelines Layout3. Exercise 14. Section 2 Forms and Input Rich Experiences5. Exercise 26. Section 3 Constraints Getting Things Right7. Conclusion 2
  • 3. Introduction 3
  • 4. Platforms Ive Designed 4ForWhile at Hummingbird/OpenText I designed for Web 1.0 and Web2.0 clients, for a cross-section of mobile platforms and WindowsXP and 7 - with a focus on Office 2003 and 2007. I did a brief stintof command line interface design.
  • 5. An Attempt at Platform- 5Independent DesignToday Im going to try to provide theories and patterns that shouldwork across platforms - mobile, desktop, web. When theres specialconsideration for specific platforms Ill mention them.
  • 6. Love your passion. 6Know your business.Its my hope that youre a developer who loves developing.You recognize the value of having a good experience built into thesoftware you produce, but think consideration for usability is anecessary evil to getting the software accepted by the business.
  • 7. 7Approach for TodayIm going to cover three sets of principles. Between each set welldo an exercise that employs some of the principles that I justcovered. You shouldnt worry about learning it all, you just need tolearn enough to do the exercises.My goal is to overwhelm you.
  • 8. Generalists are better than 8Specialists.In the world of User Experience, people fall into one of three largebuckets. Today were going to look at functions that all these roleswould perform.• Conceptual Designers• Interaction Designers• Usability Testers
  • 9. 9Take my word for it.Most of you are going to disagree with some portion of theprinciples Ill cover tonight. Thats great - I dont have a problemwith people disagreeing with me - but I would like to cover thematerial that Ive prepared and this means we have to movequickly.My goal is to spend our time together exposing you to new ideasrather than discussing things you already know.
  • 10. Questions if Interest 10PermitsWe have a lot of material to cover today. A LOT. Im going toassume that all of you have been in classes where youve been thesmartest kid and youve been bored to death by the questions ofothers. Tonight youre invited to ask questions as often as youdlike, but well vote as a group on whether we want to spend thetime on listening to the answer. If not, record your question on asticky note and well answer them at the end of the course.
  • 11. 11The ClapWhen I clap like this: Clap --- Clap. ______ Clap, Clap, Clap.You clap like this: Clap, Clap, Clap, Clap. ______ Clap --- Clap.
  • 12. Find a Partner - 2 minsNow, find a partner whose last name starts with thesame letter as your own. Each team should have onepackage of markers and sticky notes.
  • 13. Section 1 - Understanding theProblemIn this section, well be reviewing some of the moreconceptual things that are needed to understand theproblem domain.
  • 14. Whos Your Audience?
  • 15. 15Manage your EgoNo one cares what you want. The egotistical designer will envisionthe perfect product for themselves and get it implemented, only tofind that the target audience has COMPLETELY different needs.Consider the difference between yourself and a nurse working ahospital ward.
  • 16. 16Manage ITs egoIT may say they know what the business wants. Theyll come tomeetings to "represent the business". Their input is valuable, butfunctional areas who are representing other areas are going toskew the information theyre giving to you based on their ownperception, goals and politics. Sometimes its on purpose, butgenerally its going to be unintentional, which makes it even harderto manage
  • 17. Manage your Owners, 17Sponsors, Users andStakeholdersWho are these people?• Owners will make decisions and will be paying for the product.• Sponsors have an interest in what youre doing and can derail your project.• Users are the lucky ones who get to use your awesome product.• Stakeholders need to be kept in the loop as the project progresses because the product will impact them or their staff at some point.
  • 18. Know your Users 18CharacteristicsAge, education, motivation level, how long theyve been in theposition, types of things they know, speed at which theywork, pressure theyre under, amount of time they have to performa task, and goals are all things that will inform and impact yourdesign.
  • 19. 19Use Personas"Why do I need to know that Fiona has a cat?"Sometimes UX professionals go a little far putting details into theirpersonas. The goal of a persona is to capture an understanding ofwho the user is so that good design decisions can be made for thatperson. Fionas cat may have nothing to do with the software shesusing, but consider the impact to the design of a tablet app whoseuser is petting her cat with one hand.
  • 20. Provide Benefits. 20Forget Features.Your users dont care that your product has single sign-on. Theydont know what that means. But, they really like that they donthave to reenter their credentials as they navigate around theapplications on their workstation.
  • 21. Be Process Orientated, 21Not Product DrivenIn your work, are you trying to create a great product? Or are youtrying to develop the best process for developing great products?The first may result in a great product, but the second will help youmake great products throughout your career.
  • 22. Learn to Facilitate People 22to Achieve your GoalsYou need to get to know your users. You need to talk to them. Youmight think theyre stupid: "how can they not understand theclient-server relationship?"But they know WAY more about what you need to know: whatsinvolved in their work.
  • 23. Quick Exercise - 2 minsTwo roles: one partner is the facilitator, one is the participant.As facilitator, your job is to be perceived as intensely interested inthe participant. Some questions to get you going: • How did you get here today? • What was the best part of your day today? • What did you eat for dinner?
  • 24. Quick Exercise - 2 minsParticipants share with the facilitator: • How did that feel? • Do you feel like sharing more information? • Do you feel closer to the facilitator?
  • 25. Dont trust what a user says. 25Watch what they do.One of the scariest things about UX design is the fact that usersdont know what they know. And theyll misrepresent what theydo. Consensus from the user base is not what you need. What youneed is to understand what they do in their jobs.Theres many approaches to getting this info, but first you mustnot trust what they say.
  • 26. 26Consider the Users ContextWhere and when are your users going to be using the product? Arethey in their car? In a quiet or noisy space? Will they be workingfor hours inside your product, or are they switching betweenapplications? Or do they only visit your site/app once a week? Amonth? Is their screen tiny or large? Do they have a good internetconnection? How much power do they have to run their device? Isstorage a concern?
  • 27. Visual Design
  • 28. "A brand is not what you say it is. 28Its what they say it is." - The Brand Gap
  • 29. Take Advantage of 29Rebranding EffortsFor a long time I thought rebranding efforts were about changingthe visual design of a product or site. In fact, its actually anorganization-wide effort to change the way their customers feelabout their services or product. It just rolls down to developmentas an update to the look and feel. During this period, take theopportunity to ask the marketing team for help understandingwhat the personality of the product should be.
  • 30. Value the Aesthetic 30Usability EffectThe Aesthetic-Usability Effect causes users to perceive prettierdesigns to be easier to use than less pretty designs. (Note: Prettier= more aesthetically pleasing) This means that if you can makeyour designs more appealing, people will find them easier to use.
  • 31. Make Friends with a 31Visual DesignerIts not your job to know what is "aesthetically pleasing" . And, infact, its a full time job trying to keep up with it. Not only will avisual designer help you out with suggesting when to use morecolor, theyll also be able to point out things in your existing designthat arent as aesthetically pleasing as they could be.
  • 32. General Design Principles
  • 33. 33Some Important ConceptsYou might be aware of the following core concepts already, but Ithink theyre critical to understanding the domain of interactiondesign so Im going to repeat them.
  • 34. The Quality of the Design 34Communicates its StateIf your design looks like crap people will think its not done. If itlooks perfect, theyll think its done. Consider carefully when itsappropriate to use different qualities of designs.
  • 35. 35Location Must be VisibleUsers should always know where they are. Always. Provide a visualcue in a consistent place that allows users to answer the question"Where am I?"
  • 36. System Status Must be 36VisibleUsers should know whats going on. If the computer is working, theuser should be able to see that. If the computer is broken, the usershould be able to see that, too.
  • 37. 37Provide an Escape HatchExpect your users to experience moments of anxiety andfrustration. Plan for an escape hatch. On the desktop, the "ESC"button is the traditional escape hatch, while the logo is normallythe place users will expect to go when theyre lost. I suspect thehome screen is the last resort of a confused user on a mobiledevice. Supporting them in their "Get me outta here" or "ImLOST!" moments will earn you and your software some loyalty.
  • 38. Invest in the 20% of the 38features that are used 80%of the time.The 80/20 rule states that 20% of the features in a product areused 80% of the time. You MUST know which features are mostimportant in order to know where invest your time.
  • 39. 39Delete your FeaturesA useful exercise to perform at any stage of a design is to removethree features and see if the goal of the design is still fulfilled. Thenrepeat. The fewer features you can implement while stillmaintaining the value youre trying to achieve, the cheaper theproduct to build and maintain and the more streamlined theexperience will be.
  • 40. 40Comparable is not BetterJust because your competition is doing it, doesnt mean that youshould. Cramming your product with all of your competitorsfeatures is a really expensive, time consuming way to be just aboutas good as them. Its good to know what the competition isdoing, but its better to be able to offer the same benefits in abetter, simpler way.
  • 41. Movement is NOT your 41friendThe peripheral areas of our vision are hard coded to cause us torespond to motion by looking at it. Its a response that evolved tohelp us survive when we lived in the woods and needed to huntand be warned of something approaching. Movement outside ofthe area where the user is focusing can, at a minimum, beannoying and, at a maximum, can create stress. Dont usemovement. Not even on transitions to get attention. They wastetime and theyre annoying.
  • 42. Use Metaphors to 42Facilitate UnderstandingWhat does the icon of the back of an envelope represent? An email.In reality, email has nothing to do with envelopes, but theassociation helps users abstract out the complexities of the emailconstruct. When trying to communicate complex ideas, use ametaphor to help users understand. Other examples of metaphorsinclude the desktop representing the home screen of a O/S, a pageof paper representing a word processor and a file folder torepresent a container.
  • 43. Know How Responsive 43You Have To Be• Users wont notice if they have to wait less than a second.• Theyll notice but not mind if they have to wait 1-2 seconds.• They walk away after 10 seconds.
  • 44. 44Consistency is CriticalNew users will come to your software with a mental model thatdetermines what they will expect your system to do. Its your job tocreate something that facilitates the evolution of that mentalmodel so that they can learn how to get the most out of yourproduct. Using core elements consistently will allow them to becomfortable with the newer elements.
  • 45. 45If it Sucks, Toss It.The more senior a designer is, the more likely they are to be willingto discard a design. They understand theyre not artists: theircreations must work. Its not enough for them to be beautiful .Many different constraints exist that eliminate potential designsand when youre faced with some new information you MUST bewilling to toss everything youve done.
  • 46. ExercisePut something on the table in front of you.Stand up.Grab it as fast as you can.
  • 47. Its faster to hit if its big 47and close.No kidding. Really.This is called Fitts Law and its really important to consider sizeand relative distance when you want to make something easy foruser to do.
  • 48. People move quickly, 48overshoot and then refine.When moving a mouse to an area of a screen, a user will basicallyfling their mouse towards the target and then make minutecorrections to actually acquire the target.
  • 49. The edges of the screen 49allow for infinite reachUsers dont have to correct if the thing theyre after is at the topright, top left, bottom right or bottom left corners. You can use anyamount of movement and arrive in the same place.Theyre sweet spots.
  • 50. Layout
  • 51. Use Grids to Plan your 51LayoutEvery page should have a grid. No elements should cross theboundaries of the lines of the grid. Using this mechanism willensure that the content of your interfaces is easy to consume.
  • 52. 52Think ModularlySpend time and energy on designing an interaction - a menu, acontent element, a special control - once and reuse it often.Designing and implementing visual or interactive modules will notonly allow you to cheaply create awesome interfaces, youll alsoprovide a more consistent experience.
  • 53. 53Design AsymmetricallyIn Western languages, people read from upper left to bottom right.Design your dialogs and pages so that the most important content,controls and activities occur in this area.
  • 54. 54Use WhitespaceLeaving whitespace helps users understand what to focus on.
  • 55. Centered Text is 55 AmateurishCenter aligning your text will give you away as an amateur to any professional.If you dont believe me, take a look at any professional product or mainstream advertisement.
  • 56. 56Use Visual LandmarksVisual landmarks provide a sense of stability. If you want yourapplication to have a shallow learning curve or if you know userswill not be immersed in it, its critical to provide visual landmarksso they dont get lost.
  • 57. 57Repeat Common ElementsRepeating elements help users know where they are, and give thema sense of familiarity. These elements provide information aboutwhere the user is. Common elements in websites are headers,footers and status indicators.
  • 58. Follow the Layout Pattern 58for your PlatformThere are some basic patterns for the layout of any application, bethey web or desktop. Although it may feel like its stifling yourcreativity, these patterns helps user know how to get around. Payattention in particular to where confirmation buttons appear. • For example, in a Windows dialog the "OK" button appears at the bottom left, to the left of Cancel. On a Mac the confirmation button is generally more specifically named and appears to the right of Cancel.
  • 59. On the Web, 59the Logo goes HomeThe logo should appear in the upper left of all your pages. It shouldbe hyperlinked to the homepage.
  • 60. Simplify to Keep Users on 60TaskAnytime you need a user to complete a task, you want to maketheir next step as evident and simple as possible to increase thelikelihood theyll complete it. This means that many elements thatare common on most pages should be removed, includingnavigation.
  • 61. If they cant see it, they 61wont click on itIn print design theres a concept called "Below the Fold". Thats thesection of the newspaper or publication that cant be seen. Theconcept has been reused on the web to indicate the area of the pagethat you cant see. Be aware of whats in this area. Its less likely tobe clicked.
  • 62. Use Visual Hierarchies to 62CommunicateRelationshipsBigger Fonts are Parents.To smaller fonts.Indents and new lines can be used to indicate parent child relationships.
  • 63. Use the appropriate 63Navigation Mode for yourContentHorizontal navigation, like tabs or horizontal links across the topof the page, are good when youve got 3-6 pages of content. Formore content, use a vertical list on the left hand side of the page.
  • 64. Mobile ExerciseTake out your phone and look at it.
  • 65. Mobile: 65Design for Portrait OrientationOptimize for portrait orientation if youre designing for mobileplatforms. But plan to use landscape view if you want your user todo lots of typing.
  • 66. Choose a Set of Mobile 66PlatformsIf youre developing for mobile, choose 2-3 platforms. Theyll mostlikely be Windows 7, iOS and Android, although certain industriesuse other devices like RIMs BlackBerry.
  • 67. Exercise #1
  • 68. Section 2Collecting InformationIn this section, well take at look at some tactical thingsyou can do to improve the experience you offer userswhen their input.
  • 69. Forms and Input
  • 70. 70One Form, One GoalEach form youre constructing should have a clearly stated goal. Ifyou find that the information youre collecting is too large for oneform or has multiple goals, try to divide the content up moregranularly.
  • 71. Understand the Path to the 71GoalBefore constructing a form, its a best practice to envision what themost correct set of data is that that form could collect. Then try todesign the simplest method a user could take to completing it.Your job is to clear the path to the goal so that its easiest for theuser to take the action you want them to.
  • 72. Content should be the 72focusSave the fancy graphics and transitions for the stage where youreengaging the user. When theyre filling out a complex form: youvealready got them. Now, you need to help them achieve the goal asquickly as possible and during this process content is king.
  • 73. Use Contrast to Initiate 73ActionUsing color or different sizes of things draws the users attention tothe element you want them to read or take an action on. Thisincreases the likelihood theyll see it and guides them as to the nextstep that you want them to take.
  • 74. People dont always use 74their mouseLots of users will use their keyboard to fill out a form, rather than amouse. As such, the form must be optimized to support keyboardinput.In a form, tab order goes from left to right, top to bottom. Ifyoure working in a browser, let the browser determine the taborder. Dont fight it. The goal should be to let everyone doeverything, not always in the same order.
  • 75. 75Tab Order: Anti-patternIn some cases its tempting to move the user from one field to thenext. Consider the case where the phone number input isrepresented by three boxes. Its tempting to move the user to thesecond field after theyve entered the first three numbers.Dont do this. Its not standard practice to move the cursor for theuser and they wont expect it. Most likely they’ll end up in thethird box because theyll have pressed the tab key after the lastnumber.
  • 76. Properly Aligned Forms 76are BeautifulThe easiest way to make your form look beautiful is to sort out thealignment. Using a grid, ensure that all elements are aligned to theleft side of the grid. Controls should be full width of the columnthat theyre in.
  • 77. 77Left Align Labels, ControlsAll labels should be left aligned in one column with the control leftaligned in a second. One exception is the checkbox, whose labelappears to the right of the checkbox.Another exception exists for the left alignment of labels: if yourecertain that your fields are familiar to the user you can right alignthe labels. But, this only works if the user can guess what the fieldsare without the labels.
  • 78. 78Labels: Anti-patternTry not to put labels inside controls. The problem is that the usercant see whats expected of them.In the case where theres not enough room for a label, you couldconsider using this approach. But if you do, it is essential thatwhen the field is empty and the focus is shifted away that the labelreappears.
  • 79. Controls for Picking 79ThingsThe following types of controls should be used to help the user choosefrom things: • Checkbox - Choose to use a radio button with Yes/No options where two options exist. If space does not permit, use a checkbox with a label that is written in the affirmative. • Radio button - 2 to 5 choices • Dropdown – 6 to 10 choices • List box - 11 to 25 choices • Picklist with built in search - 26 and more
  • 80. 80Validate Fields on EntryWhere possible, as the user exits the field, show an inline errormessage and visual state change to indicate when the informationtheyve entered is incorrectly formatted.If the form must be submitted before an error can bedetected, then include a message at the top of the screen thatsummarizes the errors that were found and highlight the fields inerror.
  • 81. Validate Password Fields 81as the User Types Users will find it helpful if you communicate the securityrequirements for their passwords and provide some guidance onhow well their password meets these requirements.
  • 82. 82Allow Expected ErrorsHelp users complete fields by thinking of a few ways that a fieldcould be completed incorrectly and then build logic that supportsthese expected errors without throwing an error.
  • 83. 83Co-locate Related ControlsThe proximity principle says that things that are next to each otherare perceived to belong together. This means that if you place twocontrols next to each other they will naturally be associated withone another and help the user fill out the form.
  • 84. 84Lists have standard layouts• Columns whose headers trigger a sort action. By default, they are sorted by the most important or relevant column.• Buttons at the top like a toolbar• Some sort of visual indication that separates the rows• Pagination at the bottom with a Back, Next, First Page and Last Page button.
  • 85. 85Pagination: its for you!Pagination is not for the user. It does not help them. Its used forperformance reasons.Ask yourself if the back end supports pagination on tables of databefore using pagination. If it doesnt, consider the experience ofloading the entire list of results.
  • 86. 86Tabs vs. WizardsUse tabs for small changes to pre-entered information.Use wizards to guide the user through a complicated set of steps ora process where that requires a lot of data-entry or where you wantto tailor the experience.
  • 87. 87Four buttons on a wizardFour buttons should appear on a wizard. Use your platform conventions, but ifyou dont have any, the placement of these buttons should be as follows: • Back - at bottom left of screen. Is not visible on the first step. • Next - at bottom right of screen. Has a special visual style to draw attention to it. • Finish - replaces the "Next" button on the last step. If its possible for the user to submit their work half-way through the wizard, this button can appear between Next and Cancel. • Cancel - to right of Next
  • 88. 88Saving Wizard StatesIf your wizard is long or its likely that the user will need to looksomewhere else for information to complete it, support auto-saveso that their work is not lost and they can start where they left off.
  • 89. Rich Experiences
  • 90. 90Rich Web DesignsWith the introduction of AJAX, richer, more desktop-likeinteractions can be built on the web. In this section, well coversome of those rich design patterns.
  • 91. Put actions where the user 91wants to use themUse a small visual indicator to tell the user that theres somethingmore available for the element on the screen. Sometimes itsenough to have a hover effect on a label l that communicates that itcan be edited inline. Other times, you can use a small triangle toindicate the availability of more actions or a menu.
  • 92. Web: 92Support Inline EditingIts tempting to force the user to switch into an edit mode to editsome data they entered. A better, richer experience can be offeredby allowing the user to simply click on text in place and edit it.Dont use this in cases where the controls are more complicatedthan single or multi-line text boxes.
  • 93. Know the Drag and Drop 93EventsThe following are states to consider when designing a drag and dropinteraction: • On Hover - should invite the user to drag the object • Clicked and Hold - should communicate to the user that the object is now in a moveable state • Moving - Communicates that the object is being moved. Has two substates: "You can drop me here" and "You cant." • Dropped - should communicate that the object has been dropped on a target thats acceptable and that it has moved.
  • 94. 94Modals are for Disasters!If something has gone wrong and the user must take an action, usea modal. If youre letting them know something - particularly if youwant to confirm that their action succeeded - use a message inlaidin the page or dialog.Always use a modal to confirm actions that destroy some of theusers work in such a way that it cannot be undone.
  • 95. 95 Progress Indicator• Two types exist: Asynchronous and Synchronous• Use the mouse to indicate when a wait of less than 2 seconds is expected. Otherwise use the following types of dialogs, as well:• On the web, use a in-page modal dialog to indicate the progress of the action• On the desktop, use a pop-up modal to indicate the progress of the action• When showing an estimated time of completion, use a Fibonacci-ish sequence to provide estimated time of completion - 90 mins, 60 mins, 30 mins, 20 mins, 10 mins etc..
  • 96. 96Progressive DisclosureUsers need you to make a decision about how much they need toknow about something. Where you have a large set of settings, trygrouping them and abstracting them out into bigger buckets ofsettings. Allow the user to take an action to edit the more granularsettings if they wish.
  • 97. 97Auto-Save!You can build loyalty in your user base by supporting frequentintermediate saves of their work. Implement this approachwhenever it makes sense.
  • 98. Exercise #2
  • 99. Section 3Understanding the BoundariesIn this section, well look at how to find the boundariesof your solution and verify that youre inside them.
  • 100. Constraints
  • 101. "Give me constraints and 101you set me free” - Bill BuxtonThe solution lies within the boundaries of the constraints. Onceyou can identify the elements that bound your solution, yourebetter able to understand what a valid solution looks like. Welcomeconstraints. Their role is to help you understand what the rightsolution looks like.
  • 102. Which screen sizes are you 102designing for?It used to be that the standard answer for this was 800 x 600 pixel.These days are gone. Now were designing for iPads, HTC phonesand super duper giant monitors. For your design to work for youraudience, you have to know what type of device is most commonand then invent a way to provide an upgraded experience for betterdevices and downgraded experience for less capable devices.
  • 103. Accessibility and 103Universal DesignAccessibility is a property of software that allows people withdisabilities to use it. Sometimes additional equipment, like screenreaders, are used to facilitate the use of the software.Universal Design is a more inclusive approach whose goal is toensure that anyone can easily use the software effectively,regardless of ability.
  • 104. Use W3C, Section 508 and 104Common Look and Feelwhere appropriate• W3C - The World Wide Web Consortium (W3C) is an international community that develops protocols and guidelines that ensure long-term growth for the Web.• Section 508 - A section of the US Rehabilitation Act that contains a set of requirements that ensure technologies work for people with disabilities.• Common Look and Feel - the standard that the Government of Canada uses to ensure that a high level of Web accessibility is applied uniformly across its Web sites.
  • 105. Check your design in 105greyscaleThere should be a strong contrast between the text on the screenand the background color. You can check this by printing yourinterface in black and white.As well, one of every ten men is red/green colorblind. Otherportions of the population have other colorblind attributes. Youmust consider this to ensure that the contrast between thebackground and the text is not only relying on color tocommunicate.
  • 106. Ensure that color is 106redundantMeaning should be communicated using more than just color. Usedifferent symbols to accommodate those who may not see color.
  • 107. 107Design to Support ZoomThe population is aging and so are their eyes. Although 8pt fontallows you to put lots of text on the screen, its useless if youraudience cant see it.Understand how your chosen platform handles the resizing ofcontent on the screen - whether its zoom in a web browser, changeof DPI in the O/S, or by pinching and expanding on a mobile - andensure your design works at different sizes.
  • 108. Internationalize more than 108your stringsTraditionally, internationalization is thought of as ensuring that thestrings in a user interface can be translated, while localization is wherea products internationalized strings are presented in a specificlanguage.Not only does the language of the text matter, but different culturesread text in different directions and pages in different order than left toright, top to bottom. For example, letters in Arabic appear right to leftwhile traditionally, Chinese, Japanese, and Korean are writtenvertically in columns going from top to bottom and ordered from rightto left.
  • 109. Consider Different 109Learning StylesThere are three ways that people learn. Considering the differentapproaches will ensure that your software isnt prevented fromreaching people who learn in a different way. • Visual - learn by reading and seeing • Audio - learn by hearing • Haptic - lean by doing
  • 110. Choose the Right Level of 110LanguageSome people read at a Grade 4 level, while others read at a Grade 12 level. In thiscase, design the content for the lowest common denominator.Heres an example of the different words that different levels of people can read: • to — see — cat — milk — red — tree — big — book — was — city • vehemence — regicidal — evanescence — heinous — omniscience — conduit
  • 111. DONT USE ALL 111CAPITALS UNLESSYOURE SHOUTINGSentence case is for labels and other things that we want to be easyand quick to read. Title Case is for Page Titles and Buttons andOther Things We Want People to Take Time to Read and ThinkAbout.
  • 112. Getting Things Right
  • 113. 113Share as often as possible.The more frequently that you can share your work, the lower thechances are that youre heading down the wrong path. Theproblem that youll run into is that every time you share your work,someone is going to find something you have to change. Everytime.
  • 114. Decide Now. 114Refactor Later.Many questions will come up during development and sometimesthe people with the answers wont be available. In these casesyoure going to have to accept a bit of uncertainty. Ive found thatits better to make an assumption and act accordingly than to waitfor an answer.
  • 115. 115Testing and VerificationUsability testing is about seeing if the interactions that have beencreated match the users expectations. Ease of use problemsquickly become evident when a facilitator watches a user try toperform a task.
  • 116. "Elaborate usability tests 116are a waste of resources." - Jakob Nielsen
  • 117. 117Usability Test Rapidly1. Get a participant and a prototype. The prototype could be on paper, in a program or actual working software.2. Act interested in the participants feedback.3. Ask them to perform a task.4. Listen to them, watch them and nod. Do NOT justify an implementation decision. Imply that everything they are saying is correct.5. Modify your prototype where possible and where it makes sense. Repeat.
  • 118. 5 participants will find 11880% of the problemsYou need 15 users to understand the usability issues with a piece ofsoftware. But rather than wasting your time finding the sameissues over and over, run the test with 5 participants on oneprototype, incorporate their feedback and then repeat the testtwice more. You get the 15 recommended participants and avoidfinding the same problems over and over.
  • 119. Statistics dont impact 119your productAcademic, formal usability testing methods require a great manyparticipants and time and capture some measurements can betaken. These measurements - time on task, number of errors - canbe used to evaluate the progress made on a product from onerelease to another.In the real world, it costs a lot of money to run a usability studythat results in tidy statistics and, at the end of the day, the resultsare only available after a product has launched, leaving no time forit to be improved.
  • 120. Exercise #3
  • 121. Conclusion 121
  • 122. 1225 Love LanguagesIn his book "The 5 Love Languages" Gary Chapman lists thefollowing five ways of showing love: Words of Affirmation, QualityTime, Receiving Gifts, Acts of Service and Physical Touch.If you enjoyed this presentation, post a comment to my blog ortwitter.
  • 123. Todays Content was 123Inspired By:Books include The Brand Gap, 101 Things I Learned in Architecture School, 101Things I Learned in Business School, Rocket Surgery Made Easy and Dont MakeMe Think, Designing Web Interfaces and Universal Principles of Design.Slideshare content includes: Mobile Interface Design by Jonathan Stark and ThePrinciples of Good User Interface Design by David Van Camp.Nods to Jared Spool, Jakob Nielsen and Alan Cooper. Roel Vertegaal at QueensUniversity got me started when I was in school.Thanks to Dmitry Nekrasovski for his twitter feed, Bill Lucas for his devotion toimplementing the right model and Pierre Spenard for the help understandingthe complex world of visual design.
  • 124. 124We’re HiringIf you are or know a SharePoint developer or a Project Manager,we’d love to talk to you about a job with NLC.
  • 125. 125Thanks!You can reach me (for fun) at amanda.holtstrom@gmail.com and(for work) at aholtstrom@nonlinear.ca.Im also on Twitter (@Holtstrom) and have a blog that Imneglecting (holtstrom.blogspot.com).

×