SlideShare a Scribd company logo
1 of 49
Download to read offline
Best practices
on the Web
Tatiana Sidorenkova
Elvira Arslanova
Julia Malyk
UXify Eindhoven
18.02.2014
Google
LinkedIN
Ryanair
Reddit

The culture of Reddit (video)

http://www.alexa.com/siteinfo/reddit.com
What are the best practices?
A best practice is...
➢ a method or technique
➢ that has consistently shown results
superior to those achieved with other
means,
➢ and that is used as a benchmark.
It can evolve to become better as
improvements are discovered.
The elements of UX
by J.J.Garrett
Further reading
Heuristics:
Usability Heuristics for User Interface Design by J.Nielsen
First Principles of Interaction Design by B.Tognazzini
20 Guiding Principles for Experience Designers by H.Whitney
List of Style and Product Guidelines
Web:
ISO Standards
W3C Standards including Web Content Accessibility Guidelines (2008)
Web Style Guide by Patrick J. Lynch and Sarah Horton (2009)
Gestalt Principles
Similarity

Closure

Continuation

Proximity

Figure
Main Message
§  Short and clear
§  Straight to the point
Call to action
Main principles of call-to-action:
Color
Position
White space
improved legibility
fresh feel
drawing attention
higher comprehension
(stop worrying about fold)
Shape
Size
Secondary action (http://eu.marketo.com/)
Tell users what they will get
Navigation
success of navigation system is that the user
will click through it with a high degree of
confidence
Choose the logic for navigation

•  Understand your users and your content.
•  Understand the content properly, make wireframes
•  Find “lists” of things in the content
•  Create diagrams (hub & spokes, card sorting, post
• 
• 
• 
• 

notes, word association games etc.)
Find individual things
Create diagrams
Group “logically” to your user ( according to the
research that you have done). Iterative, tests.
Give names to the “clumps”
Find space in your content
Do not conflict with local navigation
Understand the behaviour of your
user
What screens are most often visited?
Do they jump between the pages often?
Now it’s time to be creative.
Choose a widget. Iterate.

Examples:
Rijksmuseum
Couchsurfing
Dataveeys
Ultranoir
Further Reading
Web User Interface (UI) Elements
Web Design Elements: Examples And Best Practices
Web Forms: Luke Wroblewski Modern Web Form Design,
Web Form Design in Action, Web Form Design Best Practices,
Designing for Today's Web
Social Login Accounts
Good UI
UI Patterns Libraries:
UI Patterns
Welie
Quince
PatternTap
Patternry
Responsive Patterns
Motion Graphics
Transitions and Animations
Dark Patterns
Content
Purpose
Why and for whom am I writing this?

vs.
Metadata

•  meta titles
•  meta description
•  meta keywords
+ alt tags
Language
Consider type of user and context
Skip the “happy talk”

•  Objective
•  Short
•  Concise
×
1 idea
per paragraph
AIDA Principle
Attention, Interest, Desire, Action
Structure
–  Heading
–  Subheadings
–  Paragraphs
–  Bullet points
–  Links
×
Pictures &
Layout
Home page

•  establishes the brand;
•  sets the tone;
•  gives the push in the right direction.
Important to:

–  spell out the big picture;
–  create a good tagline;
–  put contacts and call to
action upfront.
Web Typography
in 4 simple steps

and it’s not about choosing fonts
1. Contrast
2. Size
3. Hierarchy
4. Negative space
Getting a little more
professional
Quotes
Dashes
Alignment
How?
Typography layout
There’s more

Fascinating kerning game
Further reading
–  Web Is All About Typography
–  Smashing Magazine
–  A List Apart
–  I Love Typography
Links from the discussion
Awesome website
Bootstrap is a front-end framework for developing responsive, mobile first
projects on the web.
Foundation is an advanced responsive front-end framework.
inuitcss is a powerful, scalable, Sass-based, BEM, OOCSS framework.
HAL (Hypertext Application Language) is a simple format that gives a
consistent and easy way to hyperlink between resources in your API (very
technical).

More Related Content

What's hot

Designing Experience F08
Designing Experience F08Designing Experience F08
Designing Experience F08
anh.dang
 

What's hot (12)

From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Introduction to Information Architecture & Design - 6/20/15
Introduction to Information Architecture & Design - 6/20/15Introduction to Information Architecture & Design - 6/20/15
Introduction to Information Architecture & Design - 6/20/15
 
Designing Experience F08
Designing Experience F08Designing Experience F08
Designing Experience F08
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiences
 
Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for content
 
Web Usability for Dummies
Web Usability for Dummies Web Usability for Dummies
Web Usability for Dummies
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
Infographics - NCDA CPI Cleveland 2019 & Charlotte 2020
Infographics - NCDA CPI Cleveland 2019 & Charlotte 2020Infographics - NCDA CPI Cleveland 2019 & Charlotte 2020
Infographics - NCDA CPI Cleveland 2019 & Charlotte 2020
 
Usability testing for accessible UX
Usability testing for accessible UXUsability testing for accessible UX
Usability testing for accessible UX
 
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman RahmanUX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
UX for Apps - GDG at BUET 9 Nov 2013 Masrur Hannan and Shadman Rahman
 
Teaching/Learning IA: Considerations for UX Strategy in Educational Contexts
Teaching/Learning IA: Considerations for UX Strategy in Educational ContextsTeaching/Learning IA: Considerations for UX Strategy in Educational Contexts
Teaching/Learning IA: Considerations for UX Strategy in Educational Contexts
 

Similar to UXify Eindhoven: Best practices on the Web

Web2.0 and What it Means for Business
Web2.0 and What it Means for BusinessWeb2.0 and What it Means for Business
Web2.0 and What it Means for Business
Rich Miller
 
Requirements Definitions Of The Geospatial Web Oct27 V1 Mm
Requirements Definitions Of The Geospatial Web Oct27 V1 MmRequirements Definitions Of The Geospatial Web Oct27 V1 Mm
Requirements Definitions Of The Geospatial Web Oct27 V1 Mm
Michael Maclennan
 

Similar to UXify Eindhoven: Best practices on the Web (20)

The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 
MIT Experience Design Course Overview
MIT Experience Design Course OverviewMIT Experience Design Course Overview
MIT Experience Design Course Overview
 
How User Testing Can Inform Content - 03/19/12 Content Strategy - Minneapolis...
How User Testing Can Inform Content - 03/19/12 Content Strategy - Minneapolis...How User Testing Can Inform Content - 03/19/12 Content Strategy - Minneapolis...
How User Testing Can Inform Content - 03/19/12 Content Strategy - Minneapolis...
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern Libraries
 
My presentation at Kent State IAKM
My presentation at Kent State IAKMMy presentation at Kent State IAKM
My presentation at Kent State IAKM
 
Tools of the UX Trade
Tools of the UX TradeTools of the UX Trade
Tools of the UX Trade
 
Information Design for the New Web
Information Design for the New WebInformation Design for the New Web
Information Design for the New Web
 
User Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in TransitionUser Experience: An Industry (Always) in Transition
User Experience: An Industry (Always) in Transition
 
Applying information architecture to university web sites
Applying information architecture to university web sitesApplying information architecture to university web sites
Applying information architecture to university web sites
 
Web2.0 and What it Means for Business
Web2.0 and What it Means for BusinessWeb2.0 and What it Means for Business
Web2.0 and What it Means for Business
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
35+ Frequently Asked UX Interview Questions In 2022.pdf
35+ Frequently Asked UX Interview Questions In 2022.pdf35+ Frequently Asked UX Interview Questions In 2022.pdf
35+ Frequently Asked UX Interview Questions In 2022.pdf
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Web Design Process
Web Design ProcessWeb Design Process
Web Design Process
 
User Experience Design Initiation
User Experience Design InitiationUser Experience Design Initiation
User Experience Design Initiation
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
The Many-Tentacled Beast
The Many-Tentacled BeastThe Many-Tentacled Beast
The Many-Tentacled Beast
 
Requirements Definitions Of The Geospatial Web Oct27 V1 Mm
Requirements Definitions Of The Geospatial Web Oct27 V1 MmRequirements Definitions Of The Geospatial Web Oct27 V1 Mm
Requirements Definitions Of The Geospatial Web Oct27 V1 Mm
 

More from Tatiana Sidorenkova (6)

Storytelling in UX by Lilha Willems
Storytelling in UX by Lilha WillemsStorytelling in UX by Lilha Willems
Storytelling in UX by Lilha Willems
 
UXify Eindhoven: Introduction workshop about User eXperience
UXify Eindhoven: Introduction workshop about User eXperienceUXify Eindhoven: Introduction workshop about User eXperience
UXify Eindhoven: Introduction workshop about User eXperience
 
User Trust and Distrust in e-Commerce
User Trust and Distrust in e-CommerceUser Trust and Distrust in e-Commerce
User Trust and Distrust in e-Commerce
 
My Timeline
My TimelineMy Timeline
My Timeline
 
USI courses
USI coursesUSI courses
USI courses
 
USI в картинках
USI в картинкахUSI в картинках
USI в картинках
 

Recently uploaded

Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
gajnagarg
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 

Recently uploaded (20)

Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRLHingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
Hingoli ❤CALL GIRL 8617370543 ❤CALL GIRLS IN Hingoli ESCORT SERVICE❤CALL GIRL
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls AgencyHire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 

UXify Eindhoven: Best practices on the Web