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.2k
Let Your Data Tell a Story
jarkko
0
4.3k
Scaling your Frontend
jarkko
4
21k
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
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
500
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
140
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
180
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
Slip N Slime - Character Design Ideation
thebogheart
0
310
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
430
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.5k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
360
Night Shift concept 9/15/2024
cpineda57
0
740
ito aya|Portfolio2409
itoaya116
0
260
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Navigating Team Friction
lara
183
14k
A Philosophy of Restraint
colly
203
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
How to Ace a Technical Interview
jacobian
276
23k
What's new in Ruby 2.0
geeforr
343
31k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Six Lessons from altMBA
skipperchong
27
3.5k
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