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
The Golden Whitney
ohtristanart
PRO
0
400
Masked shaman-Storyboard 2025
ashley0521
0
290
マンガで分かるサービスデザインガイドライン
senryakuka
1
850
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
130
マズロー安達の弟子2期生、成功事例集(17人中17人が3ヶ月平均140万受注)
maslow_akkun
0
4.8k
Bulletproof Design System with TypeScript
takanorip
6
2.8k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
340
Starry | Storyboards | Scene 1-21
giofortuna_story
0
240
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
340
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.2k
Storyboard Honey
rocioparronrubio
0
240
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Cult of Friendly URLs
andyhume
78
6.4k
Into the Great Unknown - MozCon
thekraken
38
1.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
gr2m
94
13k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Scaling GitHub
holman
459
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
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