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

1. Best practices
on the Web
Tatiana Sidorenkova
Elvira Arslanova
Julia Malyk
UXify Eindhoven
18.02.2014

2. Google

3. LinkedIN

4. Ryanair

5. Reddit
The culture of Reddit (video)
http://www.alexa.com/siteinfo/reddit.com

6. What are the best practices?

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. The elements of UX
by J.J.Garrett

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. Gestalt Principles

11. Similarity
Closure
Continuation
Proximity
Figure

12. Main Message
§ Short and clear
§ Straight to the point

16. Call to action

21. 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

22. Navigation
success of navigation system is that the user
will click through it with a high degree of
confidence

23. 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”

24. Find space in your content

25. Do not conflict with local navigation

26. Understand the behaviour of your
user
What screens are most often visited?
Do they jump between the pages often?

27. Now it’s time to be creative.
Choose a widget. Iterate.
Examples:
Rijksmuseum
Couchsurfing
Dataveeys
Ultranoir

28. 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

29. Content

30. Purpose
Why and for whom am I writing this?
vs.

31. Metadata
• meta titles
• meta description
• meta keywords
+ alt tags

32. Language
Consider type of user and context

33. Skip the “happy talk”
• Objective
• Short
• Concise
×
1 idea
per paragraph

34. AIDA Principle
Attention, Interest, Desire, Action

35. Structure
– Heading
– Subheadings
– Paragraphs
– Bullet points
– Links
×
Pictures &
Layout

36. 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.

37. Web Typography
in 4 simple steps
and it’s not about choosing fonts

38. 1. Contrast

39. 2. Size

40. 3. Hierarchy

41. 4. Negative space

42. Getting a little more
professional

43. Quotes

44. Dashes

45. Alignment

46. How?
Typography layout

47. There’s more
Fascinating kerning game

48. Further reading
– Web Is All About Typography
– Smashing Magazine
– A List Apart
– I Love Typography

49. 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).