Introduction to UX and Mobile Best Practices

Slide 1

Slide 1 text

Intro to User Experience Design

Slide 2

Slide 2 text

Christopher Hallahan User Experience Designer

Slide 3

Slide 3 text

Christopher Hallahan User Experience Designer IdeaBase

Slide 4

Slide 4 text

Christopher Hallahan User Experience Designer Discover Design Refine

Slide 5

Slide 5 text

Why Do We Care About User Experience?

Slide 6

Slide 6 text

Competitive Advantage. 1 1

Slide 7

Slide 7 text

You Are Not The User. 2 2

Slide 8

Slide 8 text

Time and Money. 3 3

Slide 9

Slide 9 text

Stakeholders. 4 4

Slide 10

Slide 10 text

It’s the Right Thing To Do. 5 5

Slide 11

Slide 11 text

User Research Design Process

Slide 12

Slide 12 text

User Research

Slide 13

Slide 13 text

User Research Analytics Review Survey (Find Top Tasks) Competitive Analysis Contextual Inquiry Card Sorting  Interviews (User + Stakeholder) Usability

Slide 14

Slide 14 text

User Research

Slide 15

Slide 15 text

User Research Surveys

Slide 16

Slide 16 text

User Research Competitive Analysis

Slide 17

Slide 17 text

User Research Card Sorting

Slide 18

Slide 18 text

User Research Interviews Focus Groups

Slide 19

Slide 19 text

User Research Personas & User Stories

Slide 20

Slide 20 text

User Research Usability Testing

Slide 21

Slide 21 text

User Research

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Website: www.ohio.gov Goals: Provide access to Ohio tax ﬁling and refunds. Allow residents to easily look up Ohio agency contact information. Allow residents to search for jobs in Ohio Provide a list of things to do in Ohio for visitors Allow Ohio new businesses to easily get started. Provide access to vehicle registration services. Provide access to vehicle registration services. Guide voters to registration services and polling locations. User Research

Slide 24

Slide 24 text

Tasks: You’ve recently filed your Ohio state taxes and want to check on the status of your refund. How would you do this on ohio.gov? You’ve just gotten a letter in the mail telling you that you need to renew your motorcycle’s license plates. Start the renewal process. You’re voting with an absentee ballot in the upcoming election and need to know the latest date it can be returned by mail in order to be counted. User Research

Slide 25

Slide 25 text

User Research www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Slide 26

Slide 26 text

User Research

Slide 27

Slide 27 text

User Research Recruiting

Slide 28

Slide 28 text

User Research Analyzing Results

Slide 29

Slide 29 text

User Research Technical/ Performance Testing

Slide 30

Slide 30 text

Design Process

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

of Americans own a smartphone. 2/3 2/3

Slide 38

Slide 38 text

of Americans smartphone-only 10% 10% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/

Slide 39

Slide 39 text

Development Design

Slide 40

Slide 40 text

Project Manager Visual Designer Front-End Developer Information Architect/UX Designer Back-End Developer Content Strategist Client (Subject Expert) Design Process

Slide 41

Slide 41 text

Design Process Sitemaps / Outlines

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Desktop

Slide 44

Slide 44 text

Mobile http://www.lukew.com/ﬀ/entry.asp?1117 80% Less

Slide 45

Slide 45 text

Most Important

Slide 46

Slide 46 text

HEADING 1 Heading 2 HEADING 1 This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. •List Item •List Item •List Item •List Item This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. Logo and Navigation

Slide 47

Slide 47 text

Slide 48

Slide 48 text

http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ “There is no “how to write for mobile.” There’s only good writing. Period” Karen McGrane: “Content Strategy for Mobile”

Slide 49

Slide 49 text

Content Management

Slide 50

Slide 50 text

Content Types Book Event Location Product News Article Bio

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Br Book Title: Category: Summary: Subcategory: Date Added: Book Cover: Author(s): Upload + Link: Content Management

Slide 53

Slide 53 text

ChildBr Category: Children’s Books Content Management

Slide 54

Slide 54 text

ChildBr Green Eggs and Ham Author: Dr. Seuss Added April 2015 Green Eggs and Ham is a best-selling and critically acclaimed children's book by Dr. Seuss, ﬁrst published on August 12, 1960. As of 2001, according to Publishers Weekly, it was the fourth best-selling English-language children's book of all time.[1] The story has appeared in several animated videos starting with 1973's Dr. Seuss on the Loose: The Sneetches, The Zax; Green Eggs and Ham starring Paul Winchell as the voice of both Sam-I-am and the ﬁrst-person narrating man. Content Management

Slide 55

Slide 55 text

Design Process

Slide 56

Slide 56 text

Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search Design Process

Slide 57

Slide 57 text

Company Name Name, Telephone, Email Contact Information Our Products Map Locations Searc Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search Breakpoint: 1000px wide ^

Slide 58

Slide 58 text

Design Process

Slide 59

Slide 59 text

Design Process

Slide 60

Slide 60 text

Design Process

Slide 61

Slide 61 text

Design Process

Slide 62

Slide 62 text

Design Process

Slide 63

Slide 63 text

Design Process https://playbook.cio.gov/designstandards/

Slide 64

Slide 64 text

Design Process http://styleguide.mailchimp.com

Slide 65

Slide 65 text

Small-Screen UX Best Practices

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

The optimal touch target size is 7mm (44 device pixels or 2.75ems), based on the average size of human ﬁnger tips and pads.

Slide 70

Slide 70 text

Keep most frequently used controls within natural zone Less frequently used controls can remain in “ow” zone Support swiping back or swipe to expose menu Test and prototype on real devices to better understand ergonomics Ensure tap targets are large enough and provide ample space in between targets Mobile UX

Slide 71

Slide 71 text

You Should Care About UX.

Slide 72

Slide 72 text

Do Your Research.

Slide 73

Slide 73 text

Develop a   Design Process.

Slide 74

Slide 74 text

Think Mobile First.

Slide 75

Slide 75 text

That’s It! Questions?

Slide 76

Slide 76 text

Credits SVG Icon Set: https://github.com/icons8/flat-color-icons Responsive Web Design by Ethan Marcotte Content Strategy for Mobile and Mobile Content Mandate by Karen McGrane HTML & CSS by John Duckett Atomic Design by Brad Frost Style Tiles by Samantha Warren Style Prototypes & Responsive Design Process by Sparkbox Responsive Design Workflow by Stephen Hay Implementing Responsive Design by Tim Kadlec Mobile First by Luke Wroblewski Don’t Make Me Think by Steve Krug Designing with Web Standards by Jeffrey Zeldman