Share
Embed
Slide 1
Slide 1 text
JOHN ATHAYDE
@johnathayde
@johnathayde.com
UX & Design for Rails Devs
Elevating the “One Person Framework” Experience
Slide 2
Slide 2 text
METICULOUS
Slide 3
Slide 3 text
WHY. EXPERIENCE. VISUAL. LIVE.
1 2 3 4
Slide 4
Slide 4 text
The Why
Firmly, on these first steps…
Slide 5
Slide 5 text
ENGINEERING
DESIGN
PRODUCT
Slide 6
Slide 6 text
ENGINEERING
DESIGN
PRODUCT
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
The One Person
Problem
Unicorns, Unite!
Slide 9
Slide 9 text
h
tt
p://visual.ly/disciplines-user-experience-design
Slide 10
Slide 10 text
“BUT I CAN’T DESIGN!”
Slide 11
Slide 11 text
Design is not just what it
looks like and feels like.
Design is how it works.
“
”
—Attributed to Steve Jobs
Slide 12
Slide 12 text
MISMATCH
Developer vs User
Mental Models
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
DISCONNECTED
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
ENGINEERING
DESIGN
PRODUCT
Slide 17
Slide 17 text
ENGINEERING
DESIGN
PRODUCT
Slide 18
Slide 18 text
Experience Design
Getting the Core Right
Slide 19
Slide 19 text
WHAT DO
WE WORK ON?
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
TASK-BASED
FLOW ANALYSIS (JTBD)
Slide 24
Slide 24 text
https://hackernoon.com/ux-design-on-an-agile-team-incremental-user-
fl
ows-b9f551a9f09
Slide 25
Slide 25 text
tps://medium.com/sketch-app-sources/user-journey-maps-or-user-
fl
ows-what-to-do-
fi
rst-48e825e73aa8
Slide 26
Slide 26 text
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/
Slide 27
Slide 27 text
ASK “WHY?”
Slide 28
Slide 28 text
THE SQUINT TEST
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
SKETCH
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
http://adaptivepath.org/ideas/sketchboards-discover-better-faster-ux-solutions/
http://kor.com/blog/personas-empathy-maps-and-6-ups-reign-at-uxbootcamp
Slide 35
Slide 35 text
RESEARCH
Slide 36
Slide 36 text
SHADOW
YOUR USERS
Photo by Leo Hildago | h
tt
ps://www.
fl
ickr.com/photos/ileohidalgo/15090035480
Slide 37
Slide 37 text
AI: YOUR NEW UX
RESEARCH ASSISTANT
Slide 38
Slide 38 text
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?”
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
“I WOULD RTFM
IF I COULD FIND
A FM TO FR.”
Slide 41
Slide 41 text
The Missing
Manual of Practice
Slide 42
Slide 42 text
Visual Design Fundamentals
That Actually Matter
Slide 43
Slide 43 text
TYPE
WHITESPACE
COLOR
Slide 44
Slide 44 text
TYPE
Slide 45
Slide 45 text
https://www.pixelstech.net/article/1313756405-Web-Design-is-95%25-Typography
— Oliver Reichenstein
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
First Name
John
Last Name
Athayde
Occupation
Designer & Permaculturist
City
Charlottesville
State
Virginia
Account Created On
12/14/2009
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
QUICK TYPE WIN:
Build a 3-level type scale,
and look for opportunities to
fix hierarchy.
Slide 54
Slide 54 text
WHITESPACE
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
https://hihayk.github.io/shaper/
Slide 57
Slide 57 text
QUICK WHITESPACE WIN:
Turn your padding and
margins into variables and
adjust globally. Give your UI
some breathing room.
Slide 58
Slide 58 text
COLOR
Slide 59
Slide 59 text
Color Palette
Inspiration
@AlexCristache
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
60 - 30 - 10 Rule
Slide 62
Slide 62 text
Follow Standards
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
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.
Slide 67
Slide 67 text
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?”
Slide 68
Slide 68 text
MORE AI TRICKS & TIPS:
https://www.gptpromptguides.com/
Slide 69
Slide 69 text
We’re Doing It Live
A Design Sprint Attempt
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
https://claude.ai/public/artifacts/fe4704ee-0e7e-4c10-b4c7-005e4cd9080a
Slide 73
Slide 73 text
60 - 30 - 10 Rule
Slide 74
Slide 74 text
TO THE [FIGMA|SKETCH|CODE]!
Slide 75
Slide 75 text
THANK YOU
Meticulous.com
DeveloperUX.com
(“RAILSCONF25” for 40% o
ff
)
@johnathayde
@johnathayde.com