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
Creating Wonderful Web App User Experience
Search
Richard Shepherd
May 16, 2012
Technology
7
4.9k
Creating Wonderful Web App User Experience
Slides from my presentation at the Future of Web Design London 2012.
Richard Shepherd
May 16, 2012
Tweet
Share
Other Decks in Technology
See All in Technology
AIエージェント元年@日本生成AIユーザ会
shukob
1
240
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.7k
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
500
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
200
E2Eテスト自動化入門
devops_vtj
1
100
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.2k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.2k
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
1
140
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.4k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Designing for humans not robots
tammielis
250
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Code Reviewing Like a Champion
maltzj
521
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
GitHub's CSS Performance
jonrohan
1030
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Docker and Python
trallard
44
3.3k
Transcript
Crea ng Wonderful User Experience Web App
Hello! I’m Richard @richardshepherd
I’m frontend lead
I’m a contributor to
None
Why is great user experience important? ?
If you make chairs, you’ll want to understand how people
sit. If you make user interfaces, then you should understand how people perceive and think.” Ryan Singer, 37 Signals “
Hacking the brain
None
None
Marty Sklar
Mickey’s Ten Commandments Of Disney Imagineering
#1 Know Your Audience Mickey’s Ten Commandments Of Disney Imagineering
#2 Wear Your Guest’s Shoes Mickey’s Ten Commandments Of Disney
Imagineering
#1 Know your audience
Emo onal Memory #1 Know your audience
Humanise your applica on #2 Wear your guests shoes
http://getpocket.com/ #2 Wear your guests shoes
http://www.rdio.com/ #2 Wear your guests shoes
http://simplehoney.com/ #1 Know your audience
http://simplehoney.com/ #1 Know your audience
http://simplehoney.com/ #1 Know your audience
#3 Organise the Flow of People And Ideas Mickey’s Ten
Commandments Of Disney Imagineering
Everything we do is a form of storytelling” Mark Rollins
– Creative Director, Iconologic Creative Mornings “ #3 Organise the Flow of People and Ideas
What’s Your Story? ? #3 Organise the Flow of People
and Ideas
#3 Organise the Flow of People and Ideas
#3 Organise the Flow of People and Ideas http://mailchimp.com/ http://wufoo.com/
#3 Organise the Flow of People and Ideas
#3 Organise the Flow of People and Ideas http://mailchimp.com/ http://www.surveymonkey.com/
#3 Organise the Flow of People and Ideas
http://aarronwalter.com/ #3 Organise the Flow of People and Ideas
#4 Create a ‘Wienie’ Mickey’s Ten Commandments Of Disney Imagineering
#5 Communicate with visual Literacy Mickey’s Ten Commandments Of Disney
Imagineering
http://www.alistapart.com/… #5 Communicate with Visual Literacy
Don Norman #5 Communicate with Visual Literacy
Attractive things make people feel good, which in turn makes
them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.” Don Norman “ #5 Communicate with Visual Literacy
Depth vs. Breadth Processing #5 Communicate with Visual Literacy
Depth First “Where me keys? Where me phone?” #5 Communicate
with Visual Literacy
#5 Communicate with Visual Literacy http://www.basecamp.com/…
#5 Communicate with Visual Literacy http://www.basecamp.com/…
Breadth First A hit of dopamine #5 Communicate with Visual
Literacy
#5 Communicate with Visual Literacy http://plus.google.com/
#6 Avoid Overload Create Turn ons Mickey’s Ten Commandments Of
Disney Imagineering
#7 Tell One Story at a Time Mickey’s Ten Commandments
Of Disney Imagineering
http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell
One Story at a Time http://www.lingscars.com/
The Paradox of Choice #7 Tell One Story at a
Time
Barry Schwartz #7 Tell One Story at a Time
#7 Tell One Story at a Time http://www.flickr.com/
http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell
One Story at a Time http://www.ebookers.com/
http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell
One Story at a Time http://www.skyscanner.net/
Crea ng Turn Ons No. Not that kind. #6 Avoid
Overload, Create Turn Ons
http://www.vouchercodes.co.uk #6 Avoid Overload, Create Turn Ons
http://www.kickstarter.com #6 Avoid Overload, Create Turn Ons
http://www.mailchimp.com #6 Avoid Overload, Create Turn Ons
#8 Avoid Contradic ons, Maintain Iden ty Mickey’s Ten Commandments
Of Disney Imagineering
Beyond The Browser Maintaining your identity #8 Avoid Contradic ons,
Maintain Iden ty
http://www.mrporter.com/ #8 Avoid Contradic ons, Maintain Iden ty
#8 Avoid Contradic ons, Maintain Iden ty
#8 Avoid Contradic ons, Maintain Iden ty
#9 For every ounce of treatment, provide a tonne of
treat Mickey’s Ten Commandments Of Disney Imagineering
Give a li le #9 For every ounce of treatment,
provide a tonne of treat
#9 For every ounce of treatment, provide a tonne of
treat http://www.codecademy.com/
#9 For every ounce of treatment, provide a tonne of
treat http://www.codecademy.com/
#10 Keep It up! Mickey’s Ten Commandments Of Disney Imagineering
Ask for feedback #10 Keep It Up!
User Experience and Business Experience #10 Keep It Up!
UX is not part of the process. It is the
process. #10 Keep It Up!
The killer feature is making calls.” Steve Jobs – iPhone
launch “ #10 Keep It Up!
Ques on Everything #10 Keep It Up!
Knowing when any technique is appropriate — and when it
isn’t — marks a pragmatic, measured approach to designing for the web, and that’s a perspective I really treasure...” Ethan Marcotte “ #10 Keep It Up!
Why is great user experience important?
Aim for excellence Final thought...
OmooHQ.com/fowd Beta Pass... Exclusive
Thank You. Now, go be Awesome :) @richardshepherd Keep in
touch!