Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Full Frontal for the Backend Pack
Search
jarkko
September 29, 2011
Design
1
2.6k
Full Frontal for the Backend Pack
My presentation from Frozen Rails 2011.
jarkko
September 29, 2011
Tweet
Share
More Decks by jarkko
See All by jarkko
Metaprogramming Ruby for Greater Good
jarkko
1
5.3k
Let Your Data Tell a Story
jarkko
0
4.4k
Scaling your Frontend
jarkko
4
22k
Introduction to Great Coffee
jarkko
4
18k
Of Perfection, Perfectionism, and Perfect Web Apps
jarkko
1
2.3k
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
150
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
AI動画生成ガチャ紹介
piyo7
1
110
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
720
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
UXデザインはなぜ定着しないのか?
designstudiopartners
0
710
AI時代に淘汰されないデザインのしごと
akinen
1
130
minpaku-community-scrum-patterns
norinity1103
1
120
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Thoughts on Productivity
jonyablonski
69
4.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
Full Frontal for the Backend Pack Jarkko Laine
FU
FU Follow-up
None
Dumped the clutch
None
None
None
@jarkko jlaine.net / notkea.fi hacking at wildfireapp.com consulting and training
at odesign.fi
Design
Ich bin ein Berliner
I am a designer
Design
Design What is ?
Aesthetics i.e. graphic design
Aesthetics Functional design Cost Logistics
This talk is NOT about graphic design
“I will never buy a Mac because I won’t pay
extra for design”
Finlandia Hall http://www.flickr.com/photos/ilkkarinne/1322522488
Alvar Aalto http://www.flickr.com/photos/pntphoto/3948734361
“Sure I'll buy the web app from you but I
won't pay a dime more for design”
“Design is not just what it looks like and feels
like. Design is how it works.” http://www.flickr.com/photos/acaben/541420967/
“Damn, this sucks.”
“The products suck! There’s no sex in them anymore!” http://www.flickr.com/photos/acaben/541420967/
WATCH and (critically) OBSERVE
None
Four design principles from DOET: Conceptual models Feedback Constraints Affordances
Conceptual Models Mental Model Implementation model UI Model From Lukas
Mathis: Designed for Use
Conceptual Models Exchanging money for a movie. Flipping bits in
a bunch of databases. ? From Lukas Mathis: Designed for Use
Skeuomorphic design
Skeuomorphic design
How to find out whether the conceptual model of your
product works?
WATCH and (critically) OBSERVE
Example: browsing history
Popup windows suck because they break users’ mental model of
linear browsing history
A solved problem, right? Right?
“Technologists are not noted for learning from the error of
the past” - Norman in 1988.
None
JS and Ajax don’t have to break browsing history
None
$(‘#slider a’).click(function() { history.pushState({ path: this.path }, ‘’, this.href) $.get(this.href,
function(data) { $(‘#slider‘).slideTo(data) }) return false }) $(window).bind(‘popstate’, function() { $(‘#slider‘).slideTo(location.pathname) }) https://github.com/blog/760-the-tree-slider
History.js https://github.com/balupton/ History.js
To recap: “Designers should provide users with appropriate models: when
they're not supplied, people are likely to make up inappropriate ones.”
Feedback
Feedback “Immediate and consistent feedback is the basis of learning.”
John Medina, Brain Rules for Baby
Feedback http://www.flickr.com/photos/aschultz/3174440467
Feedback in the web
“The most egregious failures always come from the developers of
the most recent technologies.” - Norman in 1988.
Hit a button in a pure- ajax form, and absolutely
NOTHING HAPPENS.
Ajax-powered web applications need extra care as far as UI
is considered.
Disable form buttons, show a spinner Don’t forget the feedback
when an operation is over $(‘item_356’).fade( { duration: 3.0, from: 0, to: 1 }); $(‘spinner’).hide(); new Effect.Highlight( ‘new_item_element’, {duration: 5});
Feedback gone wrong
Are you sure?
None
None
confirmation popups...
confirmation popups... Break the user flow with modality
confirmation popups... Break the user flow with modality Annoy the
hell out of the user
confirmation popups... Break the user flow with modality Annoy the
hell out of the user do not work
confirmation popups don’t work, because...
confirmation popups don’t work, because... they are too close to
the action ➔ user blindly confirms
confirmation popups don’t work, because... they are too close to
the action ➔ user blindly confirms this makes the user wary of doing the right things
confirmation popups don’t work, because... they are too close to
the action ➔ user blindly confirms this makes the user wary of doing the right things they try to fix the wrong problem: action vs the target
“The user has requested deletion of the wrong file but
the computer's request for confirmation is unlikely to catch the error; the user is confirming the action, not the file name.” - Norman in 1988.
We had this covered with undo/redo/trash can
We had this covered with undo/redo/trash can And then the
web (and to an extent, mobile) apps happened
“Technologists are not noted for learning from the error of
the past” - Norman in 1988.
confirm() is the lazy, cover-my-ass solution
if gmail can do it, you can do it.
Rails-undo-redo (https://github.com/psq/ rails-undo-redo) Full undo manager for rails, but abandoned?
Acts as paranoid (https://github.com/ goncalossilva/rails3_acts_as_paranoid) Oldie but goodie jQuery undo plugin http://docs.jquery.com/Plugins/Undo existing solutions
Constraints
Constraints “The surest way to make something easy to use,
with few errors, is to make it impossible to do otherwise” - Norman in 1988.
Example: Make it impossible to insert a battery or cable
the wrong way. http://www.flickr.com/photos/nandf/2434070753
Harder to find examples from the software world, but...
“When instructions have to be pasted on something it is
badly designed” - Norman in 1988. Harder to find examples from the software world, but...
None
The save plague
The save plague For once a problem from the GUI
world
The save plague For once a problem from the GUI
world
The save plague For once a problem from the GUI
world Nothing persisted before I hit “Done”. Why?
In contrast
How to fix the save plague? Learn the lesson from
OS X Lion (and Google Docs) Save automatically, version if needed
How to fix the save plague? Periodical Ajax calls are
your friend.
Disk space is cheap, user confidence priceless
Affordances Properties of the product that tell how it is
supposed to be operated The flip side of constraints
Affordances “Wherever labels seem necessary, consider another design” - Norman
in 1988.
Affordances Visibility: Make relevant parts visible “Your user interface elements
should be created in a way that suggests to your users how they can interact with them” — Lukas Mathis
Affordances Lessons: Make links discernible, and if possible, underlined. Links
take you from place a to place b. Don’t use links for actions.
Affordances Lessons: Make buttons look like buttons, to make them
distinct from links. Disable buttons when clicked.
The four principles of user interface design Conceptual models Make
sure the conceptual models of your application's UI correspond to the mental model users have of the task at hand.
The four principles of user interface design Feedback Provide immediate
and consistent feedback on user's actions
The four principles of user interface design Constraints Guide the
user to do the correct things.
The four principles of user interface design Affordances Make relevant
parts visible, irrelevant parts invisible. User should be able to know how to operate a thing just by looking at it.
The next steps
The next steps
The next steps
The next steps Design for Hackers: Reverse-engineering beauty
Let’s all be the Steve Jobses of our lives Watch,
observe and analyze
Thank You Frozen Rails 5k tomorrow at 08:15