1) SO, WHAT IS UX DESIGN?“User Experience (UX) – is the way a person feels aboutusing a product, system, or service.”- from Wikipedia“User Experience Design (UXD or UED) - is a broad termused to explain all aspects of a person’s experience withthe system, including the interface, graphics, industrialdesign, physical interaction, and the manual.”- from Wikipedia
Why is UX Design Important?• The users experience and feelings affectthe likelihood that they will make apurchase, use the service/product again,and if theyll share, recommend it toothers.• UX has been mentioned a lot. Not justreferring to design, but also in business,big corporations, and startups.
Where did UX Design Come From?• Apples been a big influence in bringingUX to the forefront of business.• “Design is not just what it looks like and feelslike. Design is how it works.” - Steve Jobs• “User Experience” was popularized by DonNormans title of User Experience Architect atApple in 1990’s.
BACKGROUND OF UX DESIGNERS:• UX Design is a multidisciplinary activityand people often come together in thisfield from other disciplines such as:Psychology, Graphic Design, User Research,Social Media, Copywriting, Visual Design,Information Architecture, and Game Design.
THERE ARE FOUR MAIN AREAS OF UX DESIGN:• Usability• Wireframes• Graphic Design• User Interfaces
SOME DIFFERENCES:• UX Design (UX), as the name states, it’s anexperience. UX is the way a person feels. Design userinterfaces in hopes that it creates the intendedexperience.• User Interface (UI) refers to the actual object thatinteract with the user - the physical, technical parts.The UI helps us to interact with the system, but itdoes not tell us how a user reacts to it.• Sometimes the two overlap, if a person is bothcreative and talented – and depending on situation.
•Wireframes are the “blueprint”•Design Patterns are the “building blocks”•To design a good User Interface, it’s important tofirst understand basic “Design Patterns”UNDERSTANDING DESIGN PATTERNSAND USER INTERFACE BASICS:
For example, Navigation Design Patterns can include:• Navigation TabsTHINKING ABOUT LAYOUT, (CONT.):
• Navigation ListsTHINKING ABOUT LAYOUT, (CONT.):
• Breadcrumbs (in Navigation)• This Design Pattern helps users know where they’re at in the Web siteTHINKING ABOUT LAYOUT, (CONT.):
• Input FormsTHINKING ABOUT LAYOUT, (CONT.):
• Progress BarsTHINKING ABOUT LAYOUT, (CONT.):
• Modal / OverlayTHINKING ABOUT LAYOUT, (CONT.):
• Messages help keep the user informed on what happens between them, andwhen they interact with the interface.• Often overlooked as part of the User Interface, but just as important.THINKING ABOUT LAYOUT, (CONT.):
• The “Hub and Spoke” Navigation pattern has central hub with points of entryfor various separate tasks or applications.THINKING ABOUT LAYOUT, (CONT.):
• Mega MenusTHINKING ABOUT LAYOUT, (CONT.):
Once you understand the basic Design Patterns then ask:• What design problem does the pattern solve?• And when is it appropriate to use the pattern?• A Proportion and Balance design technique refers to the size relationships ofvarious elements on a page to each other (In this case, rectangle lengths)• One of these is the universal Golden RatioBASIC LAYOUT, DESIGN PATTERNS:
2) BEGINNING OF WHOLE UX DESIGNPROCESS (STRATEGY AND SCOPE)Before you design, initial research needs to be done for the Strategy of a project:• Design Requirements – Branding?• Technology Requirements – For Desktop, Mobile?• User Requirements – Who is this for? Who is the main audience?• Business Requirements – goals or needs of company; to monetize?User Analysis:• Ask questions about the Users, and understand their needs.“I never design a building before Ive seen the site and met the people who willbe using it.” - Frank Lloyd Wright
One User Analysis has been defined, now ask:• What is the primary action the users need to perform?Or other ways users might try for one task?• Figure out what that task is and optimize the UX for thattask for the user baseTASK ANALYSIS:
• Web sites are now a whole “user experience”!• When people use the Web, theyre almost always doing so tofind information, not for fun.• Are the users able to accomplish what they came to the Website to do?Note: Just the beginning of Research and Usability. More later!Keep in mind this process continues, not just doneat the beginning!WEB SITES AND UX DESIGN:
Its About Information:• Since visitors often come from external links (search engines),important that the first page they see is clear:page heading, tagline, descriptive links.• Visitors are looking for information, so Web site needs to makesense visually.• Have a Simpler Design: All elements on the page should behelping to tell the story. If they arent you should get rid ofthem.THINKING ABOUT LAYOUT:
Writing for the Web:• Be more concise with text• When on your Website, viewers don’t read much of content.They scan pages to see if content will help them find whattheyre looking for.• People notice images and graphics (charts, icons, illustrations)draw attention before blocks of text.THINKING ABOUT LAYOUT:
Some General Rules for Menus:• If number of list items is large, then use vertical list of items on left, ratherthan a horizontal menu• 7 Plus/Minus 2 Rule (a useful design rule):• Number of items in a Menu, that can be held in the short term memory at onetime. Some people can hold as many as 9 items, some 5. Most people canhold about 7.• So keep menus 7 items or less!THINKING ABOUT LAYOUT, (CONT.):
Color Usage• Color differences stand out.Research has discovered effective color combinations:• Blue: Excellent for security, trust and reliability (good for tech)Yellow: Effective in conveying sense of fun (or low price point)Black: Associated with high quality and prestige (like a higher price)Red: Found in situations where speed is a major factorPurple: “Reassuring” color is used when helping users identify with causeTHINKING ABOUT LAYOUT, (CONT.):
3) TOOLS USED, WIREFRAMINGAND DESIGNING PROCESSWireframe – is a blueprint for the design of a website.A structural document that organizes content andinteraction. Like a whiteboard for design ideas.• Wireframes define the information architecture/hierarchy of yourdesign. Allow the designer to plan the layout and interaction of aninterface without being distracted by colors, typeface choices or copy.
When drafting a wireframe, ask 4 questions:• What content needs to be on the page?• How do the different pieces of content relate toone another?• How might they possibly be arranged?• How should the user interact with the content?Two types of Wireframes:• Low-fidelity(sketches) and High-fidelityTHINKING ABOUT WIREFRAMES:
Let’s design a wireframe sketch! (using your ideas for a Web site)1) Writing:• Start by writing down all the elements you want on your website.For example: links, banners, videos, etc.2) Designing / Sketching:• Structure the design. Sketch out a quick drafton paper if there’s time. Gives structure to allthe info on the page.CLASS EXERCISE! STARTING THE PROCESS:
• Axure• Adobe Fireworks• Adobe Illustrator• Omnigraffle (for Mac)• Balsamic• Adobe Edge• Others..• Point is to not spendtoo much timechoosing, learningprograms, but to beable to express yourideas freely.PROGRAMS OFTEN USED TO CREATEWIREFRAMES:
Let’s design a wireframe in Axure!Using your laptops and Axure RP trial, create a simple,quick wireframe with the template providedCLASS EXERCISE!
First Step: In Axure, Create a Grid:Wireframe -> Grid and Guides -> Create Guides
STANDARD USER FLOW DIAGRAM:• A Flow Diagram is a simple way of showing paths users take in a Website.• Branching trees for each choice, or options available to the user• Example: when signing up for a form
Flow shapes are available in the Widgets panel:• Diamond shape, rectangle, etc.• Connector line tool connects the widgets• Or, a Flow Diagram can be auto-generated with the current Site structureSTANDARD USER FLOW DIAGRAM:
• A Site Map is a similar diagram / list showing the content for the site.• Can be generated with the current Site structureSITEMAP (RIGHT HANGING):
LOW-FIDELITY WIREFRAMES:• As mentioned before there are two types of Wireframes.
• Axure is good for wireframe and prototype creating strength• Adobe Fireworks, has an option to export to a PSD (Photoshop) file with layersHIGHER-FIDELITY WIREFRAMES:
4) RESEARCH CONTINUED, ANDUSABILITY TESTINGContinued research, and testing will happen throughout the process ofdevelopment.Usability Testing Process:1) Create User Stories:• “As a [user role] I wan to [goal] so I can [reason+”.• Example: “As a *thrifty person+, I want to have a *shopping list creationtool] so I can [learn to cook.+”.
2) Create a Persona Sketch – fictional model of users (in a targeted demographic),or typical scenarios that describe how and what people might do to accomplishtheir goals.• Ask: will the persona feel like the site is being built just for them?• Personas will help you find common behavior patterns and create betterdesigns for your user base.PERSONA SKETCH EXAMPLE:
• Usability Testing is needed to find out aboutwhat types of users are visiting the Web site• Are the users having good experiences and ableto do what they came to the Web site to do?Two main kinds of research:• Surveys (more quantity-based)• Field Study (more quality-based)USABILITY TESTING:
• Surveys are good for true/false, multiple choice, etc.• Use when you want to collect information from lots of peopleAsk:• What’s the purpose of the survey?• Who ideally should be taking it?• How many responses do you want?• How will you “market” it?SURVEYS:
• One way to gain feedback is to include Surveys or Forms for users to input theirfeedback on the site experience.A YouTube example, bottom tab prompts to “Send Feedback”:Yahoo Developer Network survey: LinkedIn popup modal:SURVEYS (CONT.):
• Helps understand attitudes, perceptions, validateassumptions• Requires smaller sample size and answers are open-ended.Examples:• Observe participants’ behaviors, interacting, completingtasks, and using products• Also do “field work” by looking at competitive andcomparative sites online• Do interviews. Some of your most valuable “data” will comefrom these.FIELD STUDIES:
A/B Testing - compares 2 versions of a site or application (A and B). Good iftesting things like Call-To-Action, button press (For examples see Abtests.com)Focus Testing – more subjective view from users about their experience andwhere they get hung up on Site.• Can be as simple as:Have users open Site, give some tasks to accomplish, and see how they do.• For example TryMyUI.com uses microphone and screen recorder.• “Direct Observation” (in-person or phone) and “Case Studies” (in-depthstudies over period of time).Note: You can leverage Social Media for more immediate feedback, rapidUsability Testing (Send out requests via Twitter to followers)SOME STRATEGIES FOR TESTING:
A key takeaway:The longer you have exposure to Web designs, Interfaces,and applications, youll begin to understand what looksgood aesthetically, and how to design great UserExperiences!Thanks for coming!
Additional Resources for Learning!Slides for the class. In case you werent able to get notes on a certain area!http://www.slideshare.net/jayyearley/intro-to-ux-designBelow are links that are good reading for continued learning of UX/UI Design!- General resource for UX Design:http://www.uxmag.com- Here youll find a variety of different lessons and tutorials if you do a search on this Website. From how to create interactive prototypes (fromwireframes), wireframe templates, improving Website Usability tests, using Fireworks, and more)http://uxdesign.smashingmagazine.com- For learning Design Patterns and User Interfaces:"Designing Interfaces", by Jennifer Tidwell (preview on Google Books)http://books.google.com/books?id=oCTSeKfMaWUCwww.uicart.com and www.uiparade.com are both good libraries of different design patterns.- For more User Testing info:http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-toolsSome additional classes:-Somewhat pricier, but they offer in-depth Visual Design and UX design courses.http://www.starterleague.comPrototype Camp in Chicago in August. They also offer a Sketch Camp:http://chicagocamps.org