"making websites look as good as they function!!" - design and usability - ingrid...

Welcome to:

Design and UsabilityMaking websites look as good as they function

28/Sept/2011 Presenter: Inky Serritslev 1

A DrupalCape Presentation by:Inky Serritslev


Bad Design

• No need for it in this age of free and highly available templates. • Risk of repetition• Using a template, still doesn’t mean you’ll get it right

It is said you have only 3-5 seconds to catch a person’s attention and keep it, so it had better be a good first impression. After that it has to be a good experience to make people remember your site and come back again.

Good Design is invisible, it just makes you feel good, but you can’t necessarily put your finger on it (Jared Spool, DrupalCon)


Usability vs UX

Usability: • Ability to use a website easily • user-friendliness and efficiency of the interface • making things easier to use. • Less thinking, less frustration

UX: • User Experience• UX addresses how a user feels when using a system• Good design makes people feel happy • People spend money when they’re happy…


Usability - UX

Jared Spool @ DrupalCon Chicago

Features vs Experience

http://www.archive.org/details/drupalconchi_day3_keynote_jared_spool



Usability - UX




Usability – The Knowledge Gap

A lot of usability and UX depends on what we already know Your current knowledge of how things work vs the target knowledgeBut this is different for every user


Usability – Knowledge Gap


Web standards• The asterisk that denotes a required field • Back/Next and Save/Delete buttons the wrong way• Hot spots / hover / focus / cursor, that denotes a link


Usability – Knowledge Gap


Web standards• The asterisk that denotes a required field • Back/Next and Save/Delete buttons the wrong way• Hot spots / hover / focus / cursor, that denotes a link

Different types of sites and levels of users• How to find information on a website • How to use that information • How to create more information

Social networking sites – Facebook, Twitter, LinkedIn Online tools / platforms such as Basecamp - training users to use your interface, so that they are comfortable and come back again and again


Usability – Finding Information

Navigation• Easy, clear navigation – generally along the top of the page• Creating active navigation• Drop-down menus

Search boxContact Details

Content • Visitors need to know what your site/company is about from the first glance• Make good use of a tagline• Put the most important information first• Content should be skimmable because web users don’t read a lot. • Keep content as concise as possible• Use Headings to Break Up Long Articles • Make the first two words count - headings, titles, links and paragraphs • Use the inverted pyramid writing style to place important information at the top of your articles. • Use bulleted lists and text formatting• Display numbers as numerals (100 and not one-hundred)

Visuals• Use Visuals Strategically• Enhance readability when they replace or reinforce long blocks of textual content.• Make sure images you use aid or support textual content - avoid stock photos and meaningless visuals.


Usability – Using Information

Once you’ve caught people’s attention, you want them to stay for a while• ecommerce sites – getting people through the payment process • membership sites – getting people to sign up • brochure sites, blogs – getting visitors to click through and stay for a while

Holding attention• Keep Consistent

• Keeping the same layout and design from page to page will allow users to quickly navigate a website. Using a similar content template for articles allows users to quickly recognize valued content. Leaving search fields and adding to cart buttons in the same place from one page to another allows users to quickly find what they are looking for as well as make a purchase.

• Guide Direction• Use a big arrow• Use a face looking in a direction




Forms • Registration should be quick• Getting people to sign up should just be 3-4 fields max, THEN you can ask for their full biography• Form labels

• Form labels can be clicked to activate the associated form element • Cursor turn to a pointer• Adding focus to form fields• Above the field

• Make use of progress trackers




Linking• Ensure Contrast• Visited Links• Use the title attribute• Button Styles• Hover State• Active State• Increased padding on links to create a larger clickable area

• Especially useful for mobile users• Icons for file types• Icons for recognition (eg social networking, rss)• Make anchor text descriptive• Link your logo• Don’t open new windows

Banner-Blindness

3-Click-Rule• Clear navigation• Logical structure • Easy-to-follow site hierarchy• Use of breadcrumbs

http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/


Usability – Creating Information

Online Platforms / ToolsTeach users how to use your site. Provide help text next to fields to explain what it does


Usability – 3 more little things

The FoldBlinking ImagesThe Gutenberg Rule


Design – Best Practices

• Scrolling within content – no!

• Colour• Contrast between text and background• The use of color and graphics does not distract the user• Moderate number of colors and use them efficiently• Define your colour palette early on

• Fonts & Text• Use max. 3 typefaces in a maximum of 3 point sizes • Maximum of 18 words or 50-80 characters per line of text.• Make sure there is a clear visual hierarchy with easy distinguishable heading levels• Alternative web-safe font with similar kerning, width and x-height as backup• Applying line height for readability

• About 1.4em / 16px


Design – Best Practices

• WYSIWYG Editor OverloadBe careful how many features you give your client / end-user in the text editor (font colour especially!) Text Formatting

Heading 1 Heading 2 Heading 3 Heading 4 (if needed) Blockquote Ordered and unordered lists Italics Bold One or two special CSS classes for emphasizing or de-emphasizing text Web Content Elements Links File upload/attach Images Tables (with instructions to use properly on tabular data only)

Get Rid of Underlining (use underlines only for hyperlinks) Direct font controls (such being able to change the color) Emoticons

• Use of Whitespace• Visually group content – easier for skimming• Improves comprehension


Design – Current Trends

HTML5 and CSS3 over Flash (also due to iPhone/iPad incompatibility)• With graceful degradation!

• CSS3 as Enhancement • Embossed looking text• Text shadow / box shadow• Rounded Corners

Typography as a design element • Making use of @fontface

Large and interactive website headers • Making a big impression on the home page

Link-rich footers

Wider layoutsLarge Photographic Backgrounds and Illustrations• Making the most out of the space you have available to you

Depth Perception• Shadowing • Layering • Lighting• Gradients• Gloss• Texture

Responsive Web Design

Social Media Integration

QR Codes







Link-rich footers





QR Codes


In Closing


In Closing

http://theoatmeal.com/comics/design_hell


In Closing

"making websites look as good as they function!!" - design and usability - ingrid...

Technology

28sept2011 presenter

lot of usability

inky serritslev bad

user experience ux

frustration ux

target knowledge

good experience

system good design