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
...
The elements of UX
by J.J.Garrett
Further reading
Heuristics:
Usability Heuristics for User Interface Design by J.Nielsen
First Principles of Interaction De...
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 comp...
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 wiref...
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 Wroblews...
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 o...
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
proje...
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
UXify Eindhoven: Best practices on the Web
Upcoming SlideShare
Loading in...5
×

UXify Eindhoven: Best practices on the Web

236

Published on

Principles of clear and user friendly web interfaces, the content strategy and good web typography basics.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
236
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UXify Eindhoven: Best practices on the Web

  1. 1. Best practices on the Web Tatiana Sidorenkova Elvira Arslanova Julia Malyk UXify Eindhoven 18.02.2014
  2. 2. Google
  3. 3. LinkedIN
  4. 4. Ryanair
  5. 5. Reddit The culture of Reddit (video) http://www.alexa.com/siteinfo/reddit.com
  6. 6. What are the best practices?
  7. 7. 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.
  8. 8. The elements of UX by J.J.Garrett
  9. 9. 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)
  10. 10. Gestalt Principles
  11. 11. Similarity Closure Continuation Proximity Figure
  12. 12. Main Message §  Short and clear §  Straight to the point
  13. 13. Call to action
  14. 14. 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
  15. 15. Navigation success of navigation system is that the user will click through it with a high degree of confidence
  16. 16. 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”
  17. 17. Find space in your content
  18. 18. Do not conflict with local navigation
  19. 19. Understand the behaviour of your user What screens are most often visited? Do they jump between the pages often?
  20. 20. Now it’s time to be creative. Choose a widget. Iterate. Examples: Rijksmuseum Couchsurfing Dataveeys Ultranoir
  21. 21. 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
  22. 22. Content
  23. 23. Purpose Why and for whom am I writing this? vs.
  24. 24. Metadata •  meta titles •  meta description •  meta keywords + alt tags
  25. 25. Language Consider type of user and context
  26. 26. Skip the “happy talk” •  Objective •  Short •  Concise × 1 idea per paragraph
  27. 27. AIDA Principle Attention, Interest, Desire, Action
  28. 28. Structure –  Heading –  Subheadings –  Paragraphs –  Bullet points –  Links × Pictures & Layout
  29. 29. 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.
  30. 30. Web Typography in 4 simple steps and it’s not about choosing fonts
  31. 31. 1. Contrast
  32. 32. 2. Size
  33. 33. 3. Hierarchy
  34. 34. 4. Negative space
  35. 35. Getting a little more professional
  36. 36. Quotes
  37. 37. Dashes
  38. 38. Alignment
  39. 39. How? Typography layout
  40. 40. There’s more Fascinating kerning game
  41. 41. Further reading –  Web Is All About Typography –  Smashing Magazine –  A List Apart –  I Love Typography
  42. 42. 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).
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×