Introduction to UX and Mobile Best Practices

An introductory talk on the importance of user experience design, user research methods, design processes and mobile best practices.

Transcript

1. Intro to User Experience Design
2. Christopher Hallahan User Experience Designer
3. Christopher Hallahan User Experience Designer IdeaBase
4. Christopher Hallahan User Experience Designer Discover Design Refine
5. Why Do We Care About User Experience?
6. Competitive Advantage. 1 1
7. You Are Not The User. 2 2
8. Time and Money. 3 3
9. Stakeholders. 4 4
10. It’s the Right Thing To Do. 5 5
11. User Research Design Process
12. User Research
13. User Research Analytics Review Survey (Find Top Tasks) Competitive Analysis Contextual Inquiry Card Sorting
 Interviews (User + Stakeholder) Usability
14. User Research
15. User Research Surveys
16. User Research Competitive Analysis
17. User Research Card Sorting
18. User Research Interviews Focus Groups
19. User Research Personas & User Stories
20. User Research Usability Testing
21. User Research
23. Website: www.ohio.gov Goals: Provide access to Ohio tax filing 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
24. 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
25. User Research www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
26. User Research
27. User Research Recruiting
28. User Research Analyzing Results
29. User Research Technical/ Performance Testing
30. Design Process
37. of Americans own a smartphone. 2/3 2/3
38. of Americans smartphone-only 10% 10% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
39. Development Design
40. Project Manager Visual Designer Front-End Developer Information Architect/UX Designer Back-End Developer Content Strategist Client (Subject Expert) Design Process
41. Design Process Sitemaps / Outlines
43. Desktop
44. Mobile http://www.lukew.com/ff/entry.asp?1117 80% Less
45. Most Important
46. 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
47. 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
48. 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”
49. Content Management
50. Content Types Book Event Location Product News Article Bio
52. Br Book Title: Category: Summary: Subcategory: Date Added: Book Cover: Author(s): Upload + Link: Content Management
53. ChildBr Category: Children’s Books Content Management
54. 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, first 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 first-person narrating man. Content Management
55. Design Process
56. Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search Design Process
57. 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 ^
58. Design Process
59. Design Process
60. Design Process
61. Design Process
62. Design Process
63. Design Process https://playbook.cio.gov/designstandards/
64. Design Process http://styleguide.mailchimp.com
65. Small-Screen UX Best Practices
69. The optimal touch target size is 7mm (44 device pixels or 2.75ems), based on the average size of human finger tips and pads.
70. 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
71. You Should Care About UX.
72. Do Your Research.
73. Develop a 
 Design Process.
74. Think Mobile First.
75. That’s It! Questions?
76. 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