SlideShare une entreprise Scribd logo
1  sur  101
DUSTIN WILLIAMS
@DUSTINOWILLIAMS
1
I AM,
Tuesday, June 25, 13
DESIGN-VELOPER
2
I AM A,
Tuesday, June 25, 13
3
Tuesday, June 25, 13
3
HTML
CSS (SASS / LESS)
JQUERY
JAVASCRIPT
PROTOTYPING
FRAMEWORKS
TWITTER BOOTSTRAP
HTML 5 BOILERPLATE
SERVE (RAILS PROTOTYPING)
SINATRA (RAILS PROTOTYPING)
Tuesday, June 25, 13
SEDUCING USERS WITH
UX & UI
4
Tuesday, June 25, 13
UX, UI, WTF
5
Tuesday, June 25, 13
UX: USER EXPERIENCE
6
Tuesday, June 25, 13
7
THE WAY A PERSON FEELS ABOUT USING A
PRODUCT, SYSTEM OR SERVICE
Saturday, July 28, 12Tuesday, June 25, 13
UI: USER INTERFACE
8
Tuesday, June 25, 13
THE SPACE WHERE INTERACTION BETWEEN
HUMANS AND MACHINES OCCURS
Saturday, July 28, 12Tuesday, June 25, 13
KILLING / CUTTING OUT CHROME
NOT THE GOOGLE CHROME BROWSER
10
Tuesday, June 25, 13
IT’S ABOUT
REDUCING CLUTTER
11
Tuesday, June 25, 13
MICROSOFT METRO UI
12
WINDOWS 8 UI
Tuesday, June 25, 13
13
Tuesday, June 25, 13
14
Tuesday, June 25, 13
15
Tuesday, June 25, 13
16
Tuesday, June 25, 13
17
Tuesday, June 25, 13
18
Tuesday, June 25, 13
Tuesday, June 25, 13
20
Tuesday, June 25, 13
21
Tuesday, June 25, 13
22
IT’S ABOUT
ENGAGING USERS
Tuesday, June 25, 13
EGO UI
COMPLETENESS, REWARDS, SHOWING OFF, ACHIEVEMENTS
23
Tuesday, June 25, 13
EGO UI: COMPLETENESS
24
Tuesday, June 25, 13
STEPS LEFT
25
Tuesday, June 25, 13
GRADUAL ENGAGEMENT
26
Tuesday, June 25, 13
27
Tuesday, June 25, 13
EGO UI: REWARDS
28
Tuesday, June 25, 13
29
Tuesday, June 25, 13
EGO UI: THE SHOW OFFS
30
Tuesday, June 25, 13
Your Stories
Share and highlight your most
memorable posts, photos and life events
on your timeline.This is where you can
tell your story from beginning, to
middle, to now.
31
Tuesday, June 25, 13
32
Tuesday, June 25, 13
EGO UI: ACHIEVEMENTS
33
Tuesday, June 25, 13
34
Tuesday, June 25, 13
IT’S ABOUT
UI FEEDBACK
Tuesday, June 25, 13
FEEDBACK: NOTIFICATIONS
36
Tuesday, June 25, 13
37
Tuesday, June 25, 13
Tuesday, June 25, 13
WHAT ABOUT UNITY?
39
Tuesday, June 25, 13
DIGITAL ECO-SYSTEM
40
Tuesday, June 25, 13
UNIFIED OS
41
Tuesday, June 25, 13
42
Tuesday, June 25, 13
Tuesday, June 25, 13
WHAT ABOUT CONTENT?
44
Tuesday, June 25, 13
CONTENT IS UI
45
Tuesday, June 25, 13
46
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
DESIGNING FOR USABILITY
51
Tuesday, June 25, 13
52
DESIGNING FOR MOTIVATION
Tuesday, June 25, 13
AS LONG AS THE MOTIVATION IS BIGGER THAN THE FRICTION, THE USER WILL
KEEP MOVING IN A FORWARD MOTION.
Tuesday, June 25, 13
ANALYTICS & DATA ARE YOUR FRIENDS
54
Tuesday, June 25, 13
LET THE DATA HELP DESIGN
55
Tuesday, June 25, 13
GOOGLE ANALYTICS
56
Tuesday, June 25, 13
57
Tuesday, June 25, 13
58
Tuesday, June 25, 13
59
Tuesday, June 25, 13
60
Tuesday, June 25, 13
CLICK TRACKING
61
Tuesday, June 25, 13
62
Tuesday, June 25, 13
63
Tuesday, June 25, 13
USER TESTING
64
Tuesday, June 25, 13
65
Tuesday, June 25, 13
66
SHOW VIDEO DUMMY
Tuesday, June 25, 13
MORE TESTING
67
Tuesday, June 25, 13
A/B SPLIT - MULTIVARIANT
68
Tuesday, June 25, 13
SKEUOMORPHS
69
Tuesday, June 25, 13
70
Tuesday, June 25, 13
Tuesday, June 25, 13
ANALOG WORLD RANDOMNESS
72
Tuesday, June 25, 13
73
Tuesday, June 25, 13
Tuesday, June 25, 13
75
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
80
Tuesday, June 25, 13
TOOLS
81
Tuesday, June 25, 13
82
TOOLS: WIREFRAMING
Tuesday, June 25, 13
83
Tuesday, June 25, 13
83
POST IT NOTES
WHITEBOARDS
AXURE
BALSAMIQ
ADOBE MASTER SUITE (ILLUSTRATOR, FIREWORKS)
Tuesday, June 25, 13
84
TOOLS: USABILITY
Tuesday, June 25, 13
85
Tuesday, June 25, 13
85
USERTESTING.COM
OPTIMIZELY
SILVERBACK
GOOGLE WEBSITE OPTIMIZER
COFFE SHOP
Tuesday, June 25, 13
I <3
86
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
Tuesday, June 25, 13
RESOURCES
96
Tuesday, June 25, 13
97
Tuesday, June 25, 13
97
USEIT.COM
UI-PATTERNS.COM
UX BOOTH
ALISTAPART.COM
UX MAGAZINE
SMASHING MAGAZINE
IXDA.ORG
Tuesday, June 25, 13

Contenu connexe

Similaire à UX, UI, WTF

Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteit
Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteitDela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteit
Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteitVincent Everts
 
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...Vincent Everts
 
Selecting a Web Framework
Selecting a Web FrameworkSelecting a Web Framework
Selecting a Web Frameworkpamselle
 
Unlocked Workshop OSCON 2013 - Part II
Unlocked Workshop OSCON 2013 - Part IIUnlocked Workshop OSCON 2013 - Part II
Unlocked Workshop OSCON 2013 - Part IIWayne Walls
 
Developing a Contextual Network for Indigenous Communities in México
Developing a Contextual Network for Indigenous Communities  in MéxicoDeveloping a Contextual Network for Indigenous Communities  in México
Developing a Contextual Network for Indigenous Communities in MéxicoMario A Moreno Rocha
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 dcmistry
 
UX, UI, WTF
UX, UI, WTFUX, UI, WTF
UX, UI, WTFwcfay
 
Herd the CATS! Project management drupalcamp colorado 2013
Herd the CATS! Project management drupalcamp colorado 2013Herd the CATS! Project management drupalcamp colorado 2013
Herd the CATS! Project management drupalcamp colorado 2013Creech
 
Message Oriented Architecture - Gr8conf US 2013
Message Oriented Architecture - Gr8conf US 2013Message Oriented Architecture - Gr8conf US 2013
Message Oriented Architecture - Gr8conf US 2013Steve Pember
 
Dorothy Atherton TAUG June 2013 Talis Aspire Digitised Content
Dorothy Atherton   TAUG June 2013 Talis Aspire Digitised ContentDorothy Atherton   TAUG June 2013 Talis Aspire Digitised Content
Dorothy Atherton TAUG June 2013 Talis Aspire Digitised ContentTalis
 
Future technologies for business simulations
Future technologies for business simulationsFuture technologies for business simulations
Future technologies for business simulationsMichal Augustini
 
For every site a make file
For every site a make fileFor every site a make file
For every site a make fileDevelopment Seed
 
Augmented Reality in JavaScript
Augmented Reality in JavaScriptAugmented Reality in JavaScript
Augmented Reality in JavaScriptEduardo Lundgren
 
Unit and functional testing with Siesta
Unit and functional testing with SiestaUnit and functional testing with Siesta
Unit and functional testing with SiestaGrgur Grisogono
 
User Experience and Agile Software Development
User Experience and Agile Software DevelopmentUser Experience and Agile Software Development
User Experience and Agile Software DevelopmentZee Spencer
 
I Smell a RAT: Rapid Application Testing
I Smell a RAT: Rapid Application TestingI Smell a RAT: Rapid Application Testing
I Smell a RAT: Rapid Application TestingRed Pill Now
 
Acesdirect golfpresentatie klantendag 26 juni
Acesdirect golfpresentatie klantendag 26 juni Acesdirect golfpresentatie klantendag 26 juni
Acesdirect golfpresentatie klantendag 26 juni Vincent Everts
 
Frontend is Fragmenting: Specialize or Die
Frontend is Fragmenting: Specialize or DieFrontend is Fragmenting: Specialize or Die
Frontend is Fragmenting: Specialize or DiePelle Bjerkestrand
 

Similaire à UX, UI, WTF (20)

Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteit
Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteitDela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteit
Dela begrafenis2punt0 24 juni HQ Eindhoven 7 trends naar digitale intimiteit
 
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...
7 digitale trends voor Flynth accountancy die leiden tot digitale intimiteit ...
 
Selecting a Web Framework
Selecting a Web FrameworkSelecting a Web Framework
Selecting a Web Framework
 
Unlocked Workshop OSCON 2013 - Part II
Unlocked Workshop OSCON 2013 - Part IIUnlocked Workshop OSCON 2013 - Part II
Unlocked Workshop OSCON 2013 - Part II
 
Developing a Contextual Network for Indigenous Communities in México
Developing a Contextual Network for Indigenous Communities  in MéxicoDeveloping a Contextual Network for Indigenous Communities  in México
Developing a Contextual Network for Indigenous Communities in México
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8
 
UX, UI, WTF
UX, UI, WTFUX, UI, WTF
UX, UI, WTF
 
Herd the CATS! Project management drupalcamp colorado 2013
Herd the CATS! Project management drupalcamp colorado 2013Herd the CATS! Project management drupalcamp colorado 2013
Herd the CATS! Project management drupalcamp colorado 2013
 
Message Oriented Architecture - Gr8conf US 2013
Message Oriented Architecture - Gr8conf US 2013Message Oriented Architecture - Gr8conf US 2013
Message Oriented Architecture - Gr8conf US 2013
 
Dorothy Atherton TAUG June 2013 Talis Aspire Digitised Content
Dorothy Atherton   TAUG June 2013 Talis Aspire Digitised ContentDorothy Atherton   TAUG June 2013 Talis Aspire Digitised Content
Dorothy Atherton TAUG June 2013 Talis Aspire Digitised Content
 
Future technologies for business simulations
Future technologies for business simulationsFuture technologies for business simulations
Future technologies for business simulations
 
For every site a make file
For every site a make fileFor every site a make file
For every site a make file
 
ModUX keynote
ModUX keynoteModUX keynote
ModUX keynote
 
Augmented Reality in JavaScript
Augmented Reality in JavaScriptAugmented Reality in JavaScript
Augmented Reality in JavaScript
 
Unit and functional testing with Siesta
Unit and functional testing with SiestaUnit and functional testing with Siesta
Unit and functional testing with Siesta
 
User Experience and Agile Software Development
User Experience and Agile Software DevelopmentUser Experience and Agile Software Development
User Experience and Agile Software Development
 
JQUERY
JQUERY JQUERY
JQUERY
 
I Smell a RAT: Rapid Application Testing
I Smell a RAT: Rapid Application TestingI Smell a RAT: Rapid Application Testing
I Smell a RAT: Rapid Application Testing
 
Acesdirect golfpresentatie klantendag 26 juni
Acesdirect golfpresentatie klantendag 26 juni Acesdirect golfpresentatie klantendag 26 juni
Acesdirect golfpresentatie klantendag 26 juni
 
Frontend is Fragmenting: Specialize or Die
Frontend is Fragmenting: Specialize or DieFrontend is Fragmenting: Specialize or Die
Frontend is Fragmenting: Specialize or Die
 

Dernier

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Dernier (19)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

UX, UI, WTF