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.5k
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
17k
Of Perfection, Perfectionism, and Perfect Web Apps
jarkko
1
2.3k
Other Decks in Design
See All in Design
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
870
Tataki Ryu
olgastoryboard
0
140
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
230
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.8k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
220
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.9k
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
ZOZO CDO Office Design
zozodevelopers
PRO
1
360
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
460
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
280
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Art, The Web, and Tiny UX
lynnandtonic
296
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Six Lessons from altMBA
skipperchong
26
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Invisible Side of Design
smashingmag
297
50k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
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