UXify Eindhoven: Best practices on the Web

100 %
0 %
Information about UXify Eindhoven: Best practices on the Web

Published on February 20, 2014

Author: tatianasidorenkova85

Source: slideshare.net


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

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




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


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




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

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

UXify US 2016 - UX Conference

UXify US 2016 Conference ... Migrating from Desktop to Web and Mobile with ... don’t miss your chance to get inspired and reloaded with knowledge and ...
Read more

Best Practices in Web Management - USGS

Best Practices in Web Management APPENDIX 5. DETAILED FINDINGS FROM THE QUESTIONNAIRE 1 and 2. Organizational leadership sees the Web as integral to ...
Read more

usability AND Design - Blogs on usability AND Design ...

Tags / UX, User Experience, Best Practices, Interaction ... Indigo, Responsive design, Development, UXify, Web Development, UXify Bulgaria, www.uxify ...
Read more

Best Practices for designing authentication web pages ...

This topic describes best practices for designing web pages that use Web Authentication Broker for logging on. ... Security Best Practices for C++;
Read more

UXify Bulgaria - UX Conference

UXify Bulgaria is a community event ... to the latest trends and best practices in UX ... native applications with high-performance web, ...
Read more

10 Best Practices To Secure and Harden Your Apache Web Server

10 Best Practices To Secure and Harden Your Apache Web Server. February 15, 2015 by GeekFlare. ... 10 Best Practices to Secure and Harden Joomla Web Site ...
Read more

Blogs: UXify - D3 Services - User Experience Design and ...

UXify US is an annual half day ... and business leaders for a conversation about Migrating from Desktop to Web and ... Best Practice; Best Practices;
Read more

Best Web Gallery

Best of; Deals; Design; Galleries. Ajax; Corporate; CSS; Blog; eCommerce; Entertainment; Flash; ... © Best Web Gallery | Follow us on Twitter | Theme ...
Read more