Designing Intuitive

SharePoint SitesUsing Visual Design Principles and Usability Best Practices to Improve Intuitiveness of your SharePoint Site

Presented by Marcy Kellar

Presentation based on slides presented atSharePoint Saturday, Indianapolis

January 30, 2010

About Me

1/30/2010

SharePoint UI Consultant with PointBridge

Diverse background in life sciences, psychology, data management and technology

Over four years experience in SharePoint architecture design, branding & implementation

Over twenty years experience in fine art

Marcy Kellar

@marcykellar

Topics To Cover

• Intuitive Sites

• Usability Best Practices

• Color

• Visual Design Principles

• Q&A

1/30/2010 @marcykellar

Intuitive Products Change My Life

1/30/2010 @marcykellar

Help Me Find My Keys

1/30/2010 @marcykellar

Intuitive = Readily

learned or understood

1/30/2010 @marcykellar

Defining the Intuitive Factor

What Your Users

Already Know

What You Want

Your Users To Do

1/30/2010 @marcykellar

Target Knowledge

CurrentKnowledge

Defining the Intuitive Factor

What Your Users

Already Know

What You Want

Your Users To Do

1/30/2010 @marcykellar

Target Knowledge

CurrentKnowledge

GAP

Jakob's Law of the Web User Experience

Users spend most of their time on other sites

1/30/2010 @marcykellar

What Users Expect: Conventions

1/30/2010 @marcykellar

Found at Universal Usability Guidelines

Questions Users Ask

• What type of site is this?

• Have I experienced a site like this before?

• Have I been to this site before?

• Where am I?

• Where have I been?

1/30/2010 @marcykellar

Questions Users Ask

• What type of site is this?

• Have I experienced a site like this before?

• Have I been to this site before?

• Where am I?

• Where have I been?

1/30/2010 @marcykellar

The answers to these questions are generally first conveyed to the user through visual design.

Intuitive Site Summary

• The intuitiveness of a site is based on the user‟s knowledge

• If user base has already been using SharePoint, consider this before moving Site Actions, Search, etc

• If you don‟t have user information follow web conventions for where to place items, follow visual design guidelines and consider usability

1/30/2010 @marcykellar

"Know thy user, and you are not

thy user."

1/30/2010 @marcykellar

Arnie Lund~

USABILITY

Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

1/30/2010 @marcykellar

First Law: Don’t Make Me Think

Anytime a “guess” is brought into the equation you are adding unnecessary thought bubbles above the users head.

1/30/2010 @marcykellar

The more challenging a website is for a user to use, the less likely they will use it.

Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability

What You Design For…

1/30/2010 @marcykellar

Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability

The Reality…

1/30/2010 @marcykellar

Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability

Usability Facts

• “Current best practices call for spending about 10% of a design project's budget on usability” Usability 101, Jakob Neilson

• “A key principle for maximizing usability is to employ iterative design, which progressively refines the design through evaluation from the early stages of design.” Usabilityfirst.com

1/30/2010 @marcykellar

Organization Information

• Users Don’t Read: provide clues that allow users to find their „nugget‟ of information‟ by scanning rather than reading

• Users need to find information quickly and easily

• Organize information into schema/hierarchy

• „Chunk‟ information into small pieces

1/30/2010 @marcykellar

VISUAL DESIGN

1/30/2010 @marcykellar

“We find that people quickly evaluate

a site by visual design alone.”

1/30/2010

Stanford Guidelines for Web Credibility,~

@marcykellar

Visual Design

Isn't About

Making Things

“Pretty”

1/30/2010 @marcykellar

Visual Design

Communicates

1/30/2010 @marcykellar

Purpose

1/30/2010 @marcykellar

Mood/Emotion

1/30/2010 @marcykellar

Brand Message

1/30/2010 @marcykellar

Action/State

1/30/2010 @marcykellar

Orientation

1/30/2010 @marcykellar

Visual Design

Has Purpose

1/30/2010 @marcykellar

Organizes Information

1/30/2010 @marcykellar

Conveys Relationships

1/30/2010 @marcykellar

Provides Visual Hierarchy

1/30/2010 @marcykellar

2. Unclear Visual Hierarchy

1. Clear Visual Hierarchy

The Presentation Ecosystem

1/30/2010 @marcykellar

• Educate users

• Establish relationships between content

• Guide users through actions

• Focus user attention

• Make organizational systems clear

• Provide situational awareness

• Maintain consistency to create a sense of place

• Effectively convey your message to your audience

• Emotional impact

• Engage and invite

• Give sites a unique personality

Slide Based on information created by Luke Wroblewski

COLOR

1/30/2010 @marcykellar

• Red: passion, love, anger

• Orange: energy, happiness, vitality

• Yellow: happiness, hope, deceit

• Green: new beginnings,

abundance, nature

• Blue: calm, responsible, sadness

• Purple: creativity, royalty, wealth

• Black: mystery, elegance, evil

• Gray: moody, conservative,

formality

• White: purity, cleanliness, virtue

• Brown: nature, wholesomeness,

dependability

• Tan or beige: conservative, piety,

dull

• Cream or ivory: calm, elegant,

purity

Color Meanings*

1/30/2010 @marcykellar

*Western Cultures

Color Guidelines

1/30/2010 @marcykellar

• A complicated color palette is for advanced designers

• Limit to less than Four (4)

• Best to use two (2) if you aren‟t a designer

• Using different values of the same hue is acceptable

• Black/white counts as one color

Color Contrast

1/30/2010 @marcykellar

Color Tips

• Use a palette of colors found in nature

• Perform a readability test before go-live

• Test for high contrast

• Do not use small fonts when using dark backgrounds

• Do not use high contrast color text on dark backgrounds (red on green, purple on green, etc)

• Consider accessibility guidelines

• Beware of “Wash out” (brown on green or yellow on clear white)

1/30/2010 @marcykellar

Avoid High Contrast Text on

Dark Backgrounds

1/30/2010 @marcykellar

Avoid High Contrast Text on

Dark Backgrounds

1/30/2010 @marcykellar

Ouch… Make it Stop

Color Tools

Color Contrast

Graybit.com

Color Meanings

Color Theory for Designers

Color Meanings across cultures

Color Meanings

Color Wheel Pro: Color Meaning

Color Palette Generator

Adobe Kuler

Colr.org

Colour Lovers

1/30/2010 @marcykellar

Design Principles

The principles of design are guidelines used for putting elements together to create effective communication

1/30/2010 @marcykellar

Design Principles:

Now They’ll Believe You!

1/30/2010 @marcykellar

CONTRAST

The study of visual opposition.

“If two items are not exactly the same, then make them different. Really different.”

1/30/2010 @marcykellar

Contrast

1/30/2010 @marcykellar

Contrast

Contrast sometimes is used inappropriately or inadvertently in SharePoint thanks to the rich text editor.

1/30/2010 @marcykellar

Contrast Tips

• Use typeface, color, whitespace, texture as contrasting elements

• Create a focal point on a page by contrasting elements together

• Avoid using attributes that are too similar

1/30/2010 @marcykellar

REPETITION

The use of repetition to create movement occurs when elements which have something in common are repeated regularly or irregularly sometimes creating a visual rhythm

1/30/2010 @marcykellar

Repetition

1/30/2010 @marcykellar

• Adds consistency

• Unifies all parts of a design

• Organizes information

• Repetition develops the organization and creates a strong brand

Repetition

1/30/2010

Repeated elements are inherent in SharePoint.

Web part headers, navigation elements, etc

@marcykellar

Repetition

1/30/2010

Repeated elements are inherent in SharePoint.

Web part headers, navigation elements, etc

@marcykellar

What SharePoint doesn’t do, is provide proper whitespace or contrast with default styles

Repetition Tips

• Repeat some element of design throughout the piece such as color, shape, texture, bullets

• Repeat visual elements throughout your site

• Look for existing repetition to strengthen

1/30/2010 @marcykellar

ALIGNMENT

Human beings perceive items that are aligned vertically and/or horizontally to be more organized than those that are not, and people process, learn and remember organized information better than unorganized information.

1/30/2010 @marcykellar

Alignment

1/30/2010

Don't center or justify lines of text

Never center headlines over flush left body copy or text that has an indent.

@marcykellar

HEADLINENever center headlines over flush left body copy or text that has an indent.

Alignment: Example

1/30/2010 @marcykellar

Alignment: Corrected

1/30/2010 @marcykellar

More Examples…

1/30/2010 @marcykellar

More Examples…

1/30/2010 @marcykellar

Can you spot the issues?

Alignment Tips

• Nothing should be placed on the page arbitrarily.

• All page items should have a visual connection

• Use a grid

• Align elements along "hard vertical edges“

• Don't combine left and right alignment on the same page

1/30/2010 @marcykellar

PROXIMITY

The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren‟t related should be kept visually separate from those which are.

1/30/2010 @marcykellar

Proximity

1/30/2010

Grouping several elements in close proximity they become one unit

We change our perception and see these 4 elements as 2 groups

@marcykellar

Proximity Example: Good

1/30/2010 @marcykellar

Proximity Example: Poor

1/30/2010 @marcykellar

Proximity Example: Poor

1/30/2010 @marcykellar

Proximity Tips

• Group related items together

• Keep non-related items far apart so that reader isn‟t confused

• DON'T use white space to break up items that belong together

1/30/2010 @marcykellar

SHAREPOINT EXAMPLES

IN ACTION

Design Principles

1/30/2010 @marcykellar

People to People

1/30/2010 @marcykellar

People to People

1/30/2010 @marcykellar

Advanced Distributed Learning

1/30/2010 @marcykellar

Advanced Distributed Learning

1/30/2010 @marcykellar

Fluor

1/30/2010 @marcykellar

Fluor

1/30/2010 @marcykellar

Avista

1/30/2010 @marcykellar

Avista

1/30/2010 @marcykellar

Cadence

1/30/2010 @marcykellar

Cadence

1/30/2010 @marcykellar

MyClubMyLife.com

1/30/2010 @marcykellar

MyClubMyLife.com

1/30/2010 @marcykellar

Resources: Podcasts

UXNet Podcast

UIE: Brain Sparks

Boagworld

1/30/2010 @marcykellar

Resources: Visual Design

1/30/2010 @marcykellar

SmashingMagazine.com

WebDesignLedger.com

The Pursuit of Interface Design Simplicity -Luke Wroblewski

Visible Narratives: Understanding Visual Organization -Luke Wroblewski

Common Visual Design Misconceptions – Luke Wroblewski

Resources: Usability and UX

useit.com

boxesandarrows.com

uxmatters.com

uxmag.com

thegridsystem.org

Usability.gov

Usability.net

Usability Professional‟s Association

Universal Usability Guidelines

Standard Web Components

10 Useful Usability Findings and Guidelines

20 Do‟s and Don‟ts of Effective Web Design

Introduction to Good Usability

1/30/2010 @marcykellar

Resources: Books

1/30/2010 @marcykellar

http://thesharepointmuse.com

Where To Find Me

1/30/2010 @marcykellar

Resources and epiphanies in 140 characters or less.

References

The Non Designers Design Book, Robin Williams

Universal Usability Guidelines

Don‟t Make Me Think, Steve Krug, 2001

Site Seeing: A Visual Approach to Web Usability, Luke Wroblewski, 2002

http://www.lukew.com/ff/entry.asp?981, Luke Wroblewski

1/30/2010 @marcykellar