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
root COMPANY DECK / We are hiring!
root_recruit
1
24k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
310
Yumika Yamada Portfolio
yumii
0
1.7k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
7 Core Values of Round-L
wired888
0
2.1k
#Dubois Challenge 2025: Economics
ajstarks
1
180
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
490
佐藤千晶|ポートフォリオ
chimi_chia
0
170
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
620
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Balancing Empowerment & Direction
lara
4
670
Documentation Writing (for coders)
carmenintech
75
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Statistics for Hackers
jakevdp
799
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
A designer walks into a library…
pauljervisheath
209
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
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