UX for Rails Devs: Elevating the One Person Framework Expreince

Transcript

1. JOHN ATHAYDE @johnathayde @johnathayde.com UX & Design for Rails Devs Elevating the “One Person Framework” Experience
2. METICULOUS
3. WHY. EXPERIENCE. VISUAL. LIVE. 1 2 3 4
4. The Why Firmly, on these first steps…
5. ENGINEERING DESIGN PRODUCT
6. ENGINEERING DESIGN PRODUCT
8. The One Person Problem Unicorns, Unite!
9. h tt p://visual.ly/disciplines-user-experience-design
10. “BUT I CAN’T DESIGN!”
11. Design is not just what it looks like and feels like. Design is how it works. “ ” —Attributed to Steve Jobs
12. MISMATCH Developer vs User Mental Models
13. Models → Controllers → Views User model → PostsController → index/show/edit actions "I want to share something with my friends" User has_many :posts Post belongs_to :user Where do I write? How do I know people will see it? Can I fi x mistakes? RESTful routes, database relationships Visual cues and learned patterns from other apps
14. DISCONNECTED
16. ENGINEERING DESIGN PRODUCT
17. ENGINEERING DESIGN PRODUCT
18. Experience Design Getting the Core Right
19. WHAT DO WE WORK ON?
23. TASK-BASED FLOW ANALYSIS (JTBD)
24. https://hackernoon.com/ux-design-on-an-agile-team-incremental-user- fl ows-b9f551a9f09
25. tps://medium.com/sketch-app-sources/user-journey-maps-or-user- fl ows-what-to-do- fi rst-48e825e73aa8
26. USABILITY HEURISTCS Jakob’s Ten Usability Heuristics www.nngroup.com/articles/ten-usability-heuristics/ Designs should keep users informed about what is going on, through appropriate, timely feedback. Visibility of System Status 1 The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Match between System and the Real World 2 Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action. User Control and Freedom 3 Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Consistency and Standards 4 Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Error Prevention 5 Minimize the user's memory load by making elements, actions, and options visible. Avoid making users remember information. Recognition Rather Than Recall 6 Shortcuts — hidden from novice users — may speed up the interaction for the expert user. Flexibility and Efficiency of Use 7 Interfaces should not contain information which is irrelevant. Every extra unit of information in an interface competes with the relevant units of information. Aesthetic and Minimalist Design 8 It’s best if the design doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users complete their tasks. Help and Documentation 10 Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. Recognize, Diagnose, and Recover from Errors 9 Nielsen Norman Group Interactive mall maps have to show people where they currently are, to help them understand where to go next. Users can quickly understand which stovetop control maps to each heating element. Just like physical spaces, digital spaces need quick “emergency” exits too. Check-in counters are usually located at the front of hotels, which meets expectations. Guard rails on curvy mountain roads prevent drivers from falling off cliffs. Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts. People are likely to correctly answer “Is Lisbon the capital of Portugal?”. A minimalist three-legged stool is still a place to sit. Wrong-way signs on the road remind drivers that they are heading in the wrong direction. Information kiosks at airports are easily recognizable and solve customers' problems in context and immediately. 1 EXIT WRONG WAY CHECK IN i www.nngroup.com/articles/ten-usability-heuristics/
27. ASK “WHY?”
28. THE SQUINT TEST
31. SKETCH
34. http://adaptivepath.org/ideas/sketchboards-discover-better-faster-ux-solutions/ http://kor.com/blog/personas-empathy-maps-and-6-ups-reign-at-uxbootcamp
35. RESEARCH
36. SHADOW YOUR USERS Photo by Leo Hildago | h tt ps://www. fl ickr.com/photos/ileohidalgo/15090035480
37. AI: YOUR NEW UX RESEARCH ASSISTANT
38. AI RESEARCH TECHNIQUES: PERSONA GENERATION: "Act as a user researcher. Based on this Rails app description, create 3 user personas with their goals, frustrations, and contexts." USABILITY AUDIT: “Review this screenshot of my Rails app’s dashboard. What usability issues do you see? Prioritize them by impact.” USER JOURNEY MAPPING: “Help me map the journey for [user|task|etc] in my Rails app. What questions or problems might users have at each step?”
40. “I WOULD RTFM IF I COULD FIND A FM TO FR.”
41. The Missing Manual of Practice
42. Visual Design Fundamentals That Actually Matter
43. TYPE WHITESPACE COLOR
44. TYPE
45. https://www.pixelstech.net/article/1313756405-Web-Design-is-95%25-Typography — Oliver Reichenstein
48. First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009
49. First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009
50. First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009
51. First Name John Last Name Athayde Occupation Designer & Permaculturist City Charlottesville State Virginia Account Created On 12/14/2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009
52. John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009 John Athayde A Designer & Permaculturist from Charlottesville, Virginia Member since 14 Dec 2009
53. QUICK TYPE WIN: Build a 3-level type scale, and look for opportunities to fix hierarchy.
54. WHITESPACE
56. https://hihayk.github.io/shaper/
57. QUICK WHITESPACE WIN: Turn your padding and margins into variables and adjust globally. Give your UI some breathing room.
58. COLOR
59. Color Palette Inspiration @AlexCristache
61. 60 - 30 - 10 Rule
62. Follow Standards
66. QUICK COLOR WIN: Pick ONE accent color and use it consistently for all primary actions across your app ALWAYS pair color meaning with a non-color indicator.
67. AI DESIGN TECHNIQUES: COLOR PALETTE GENERATION: "Create a professional color palette for a [type] Rails app, following the 60-30-10 rule, with accessibility considerations for color blindness." TYPOGRAPHY PAIRING: “Suggest Google Font combinations for a clean, professional Rails application.” DESIGN CRITIQUE: “Review this screenshot of my Rails app. How well does it follow visual hierarchy principles? Are there any accessibility concerns?”
68. MORE AI TRICKS & TIPS: https://www.gptpromptguides.com/
69. We’re Doing It Live A Design Sprint Attempt
72. https://claude.ai/public/artifacts/fe4704ee-0e7e-4c10-b4c7-005e4cd9080a
73. 60 - 30 - 10 Rule
74. TO THE [FIGMA|SKETCH|CODE]!
75. THANK YOU Meticulous.com DeveloperUX.com (“RAILSCONF25” for 40% o ff ) @johnathayde @johnathayde.com