1. Intro to UX Design
Jay Yearley

2. 1) SO, WHAT IS UX DESIGN?
“User Experience (UX) – is the way a person feels about
using a product, system, or service.”
- from Wikipedia
“User Experience Design (UXD or UED) - is a broad term
used to explain all aspects of a person’s experience with
the system, including the interface, graphics, industrial
design, physical interaction, and the manual.”
- from Wikipedia

3. Why is UX Design Important?
• The users' experience and feelings affect
the likelihood that they will make a
purchase, use the service/product again,
and if they'll share, recommend it to
others.
• UX has been mentioned a lot. Not just
referring to design, but also in business,
big corporations, and startups.

4. Where did UX Design Come From?
• Apple's been a big influence in bringing
UX to the forefront of business.
• “Design is not just what it looks like and feels
like. Design is how it works.” - Steve Jobs
• “User Experience” was popularized by Don
Norman's title of User Experience Architect at
Apple in 1990’s.

5. BACKGROUND OF UX DESIGNERS:
• UX Design is a multidisciplinary activity
and people often come together in this
field from other disciplines such as:
Psychology, Graphic Design, User Research,
Social Media, Copywriting, Visual Design,
Information Architecture, and Game Design.

6. THERE ARE FOUR MAIN AREAS OF UX DESIGN:
• Usability
• Wireframes
• Graphic Design
• User Interfaces

7. SOME DIFFERENCES:
• UX Design (UX), as the name states, it’s an
experience. UX is the way a person feels. Design user
interfaces in hopes that it creates the intended
experience.
• User Interface (UI) refers to the actual object that
interact with the user - the physical, technical parts.
The UI helps us to interact with the system, but it
does not tell us how a user reacts to it.
• Sometimes the two overlap, if a person is both
creative and talented – and depending on situation.

8. •Wireframes are the “blueprint”
•Design Patterns are the “building blocks”
•To design a good User Interface, it’s important to
first understand basic “Design Patterns”
UNDERSTANDING DESIGN PATTERNS
AND USER INTERFACE BASICS:

9. For example, Navigation Design Patterns can include:
• Navigation Tabs
THINKING ABOUT LAYOUT, (CONT.):

10. • Navigation Lists
THINKING ABOUT LAYOUT, (CONT.):

11. • Breadcrumbs (in Navigation)
• This Design Pattern helps users know where they’re at in the Web site
THINKING ABOUT LAYOUT, (CONT.):

12. • Input Forms
THINKING ABOUT LAYOUT, (CONT.):

13. • Progress Bars
THINKING ABOUT LAYOUT, (CONT.):

14. • Modal / Overlay
THINKING ABOUT LAYOUT, (CONT.):

15. • Messages help keep the user informed on what happens between them, and
when they interact with the interface.
• Often overlooked as part of the User Interface, but just as important.
THINKING ABOUT LAYOUT, (CONT.):

16. • The “Hub and Spoke” Navigation pattern has central hub with points of entry
for various separate tasks or applications.
THINKING ABOUT LAYOUT, (CONT.):

17. • Mega Menus
THINKING ABOUT LAYOUT, (CONT.):

18. 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 of
various elements on a page to each other (In this case, rectangle lengths)
• One of these is the universal Golden Ratio
BASIC LAYOUT, DESIGN PATTERNS:

19. 2) BEGINNING OF WHOLE UX DESIGN
PROCESS (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 I've seen the site and met the people who will
be using it.” - Frank Lloyd Wright

20. 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 that
task for the user base
TASK ANALYSIS:

21. • Web sites are now a whole “user experience”!
• When people use the Web, they're almost always doing so to
find information, not for fun.
• Are the users' able to accomplish what they came to the Web
site to do?
Note: Just the beginning of Research and Usability. More later!
Keep in mind this process continues, not just done
at the beginning!
WEB SITES AND UX DESIGN:

22. It's 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 make
sense visually.
• Have a Simpler Design: All elements on the page should be
helping to tell the story. If they aren't you should get rid of
them.
THINKING ABOUT LAYOUT:

23. 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 what
they're looking for.
• People notice images and graphics (charts, icons, illustrations)
draw attention before blocks of text.
THINKING ABOUT LAYOUT:

24. Some General Rules for Menus:
• If number of list items is large, then use vertical list of items on left, rather
than 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 one
time. Some people can hold as many as 9 items, some 5. Most people can
hold about 7.
• So keep menus 7 items or less!
THINKING ABOUT LAYOUT, (CONT.):

25. 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 factor
Purple: “Reassuring” color is used when helping users identify with cause
THINKING ABOUT LAYOUT, (CONT.):

26. 3) TOOLS USED, WIREFRAMING
AND DESIGNING PROCESS
Wireframe – is a blueprint for the design of a website.
A structural document that organizes content and
interaction. Like a whiteboard for design ideas.
• Wireframes define the information architecture/hierarchy of your
design. Allow the designer to plan the layout and interaction of an
interface without being distracted by colors, typeface choices or copy.

27. When drafting a wireframe, ask 4 questions:
• What content needs to be on the page?
• How do the different pieces of content relate to
one another?
• How might they possibly be arranged?
• How should the user interact with the content?
Two types of Wireframes:
• Low-fidelity(sketches) and High-fidelity
THINKING ABOUT WIREFRAMES:

28. 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 draft
on paper if there’s time. Gives structure to all
the info on the page.
CLASS EXERCISE! STARTING THE PROCESS:

29. • Axure
• Adobe Fireworks
• Adobe Illustrator
• Omnigraffle (for Mac)
• Balsamic
• Adobe Edge
• Others..
• Point is to not spend
too much time
choosing, learning
programs, but to be
able to express your
ideas freely.
PROGRAMS OFTEN USED TO CREATE
WIREFRAMES:

30. Let’s design a wireframe in Axure!
Using your laptops and Axure RP trial, create a simple,
quick wireframe with the template provided
CLASS EXERCISE!

31. First Step: In Axure, Create a Grid:
Wireframe -> Grid and Guides -> Create Guides

32. 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

33. 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 structure
STANDARD USER FLOW DIAGRAM:

34. • A Site Map is a similar diagram / list showing the content for the site.
• Can be generated with the current Site structure
SITEMAP (RIGHT HANGING):

35. LOW-FIDELITY WIREFRAMES:
• As mentioned before there are two types of Wireframes.

36. • Axure is good for wireframe and prototype creating strength
• Adobe Fireworks, has an option to export to a PSD (Photoshop) file with layers
HIGHER-FIDELITY WIREFRAMES:

37. 4) RESEARCH CONTINUED, AND
USABILITY TESTING
Continued research, and testing will happen throughout the process of
development.
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 creation
tool] so I can [learn to cook.+”.

38. 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 accomplish
their 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 better
designs for your user base.
PERSONA SKETCH EXAMPLE:

39. • Usability Testing is needed to find out about
what types of users are visiting the Web site
• Are the users having good experiences and able
to 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:

40. • Surveys are good for true/false, multiple choice, etc.
• Use when you want to collect information from lots of people
Ask:
• 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:

41. • One way to gain feedback is to include Surveys or Forms for users to input their
feedback on the site experience.
A YouTube example, bottom tab prompts to “Send Feedback”:
Yahoo Developer Network survey: LinkedIn popup modal:
SURVEYS (CONT.):

42. • Helps understand attitudes, perceptions, validate
assumptions
• Requires smaller sample size and answers are open-ended.
Examples:
• Observe participants’ behaviors, interacting, completing
tasks, and using products
• Also do “field work” by looking at competitive and
comparative sites online
• Do interviews. Some of your most valuable “data” will come
from these.
FIELD STUDIES:

43. A/B Testing - compares 2 versions of a site or application (A and B). Good if
testing things like Call-To-Action, button press (For examples see Abtests.com)
Focus Testing – more subjective view from users about their experience and
where 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-depth
studies over period of time).
Note: You can leverage Social Media for more immediate feedback, rapid
Usability Testing (Send out requests via Twitter to followers)
SOME STRATEGIES FOR TESTING:

44. A key takeaway:
The longer you have exposure to Web designs, Interfaces,
and applications, you'll begin to understand what looks
good aesthetically, and how to design great User
Experiences!
Thanks for coming!

45. Additional Resources for Learning!
Slides for the class. In case you weren't able to get notes on a certain area!
http://www.slideshare.net/jayyearley/intro-to-ux-design
Below are links that are good reading for continued learning of UX/UI Design!
- General resource for UX Design:
http://www.uxmag.com
- Here you'll find a variety of different lessons and tutorials if you do a search on this Website. From how to create interactive prototypes (from
wireframes), 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=oCTSeKfMaWUC
www.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-tools
Some additional classes:
-Somewhat pricier, but they offer in-depth Visual Design and UX design courses.
http://www.starterleague.com
Prototype Camp in Chicago in August. They also offer a Sketch Camp:
http://chicagocamps.org