Designing Intuitive SharePoint Sites

Designing Intuitive
SharePoint Sites
Using Visual Design Principles and Usability Best Practices to
Improve Intuitiveness of your SharePoint Site

Presented by Marcy Kellar
Presentation based on slides presented at
SharePoint Saturday, Indianapolis

January 30, 2010

About Me
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

1/30/2010 @marcykellar

Topics To Cover
• Intuitive Sites
• Usability Best Practices
• Color
• Visual Design Principles
• Q&A


Intuitive Products Change My Life


Help Me Find My Keys


Intuitive = Readily
learned or understood


Defining the Intuitive Factor

What Your Users What You Want
Already Know Your Users To Do

Current Target
Knowledge Knowledge


Defining the Intuitive Factor

What Your Users What You Want
Already Know Your Users To Do
GAP

Current Target
Knowledge Knowledge


Users spend most of their
time on other sites

Jakob's Law of the Web User Experience


What Users Expect: Conventions

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?


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?

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


"Know thy user, and you are not
thy user."
~ Arnie Lund


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.

USABILITY


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.

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…



The Reality…



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


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


VISUAL DESIGN


“We find that people quickly evaluate
a site by visual design alone.”
~ Stanford Guidelines for Web Credibility,


Visual Design
Isn't About
Making Things
“Pretty”

Visual Design
Communicates


Purpose

Mood/Emotion

Brand Message

Action/State

Orientation

Visual Design
Has Purpose


Organizes Information

Conveys Relationships

1. Clear Visual Hierarchy

2. Unclear Visual Hierarchy

Provides Visual Hierarchy

The Presentation Ecosystem

• Educate users • Maintain consistency to create
• Establish relationships between a sense of place
content • Effectively convey your
message to your audience
• Guide users through actions
• Emotional impact
• Focus user attention
• Make organizational systems clear • Engage and invite
• Give sites a unique personality
• Provide situational awareness
Slide Based on information created by Luke Wroblewski


COLOR


Color Meanings*
• Red: passion, love, anger • Gray: moody, conservative,
formality
• Orange: energy, happiness, vitality
• White: purity, cleanliness, virtue
• Yellow: happiness, hope, deceit
• Brown: nature, wholesomeness,
• Green: new beginnings,
dependability
abundance, nature
• Tan or beige: conservative, piety,
• Blue: calm, responsible, sadness
dull
• Purple: creativity, royalty, wealth
• Cream or ivory: calm, elegant,
• Black: mystery, elegance, evil purity

*Western Cultures


Color Guidelines
• 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


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)


Avoid High Contrast Text on
Dark Backgrounds


Avoid High Contrast Text on
Dark Backgrounds

Ouch… Make it Stop


Color Tools
Color Contrast Color Palette Generator
Graybit.com Adobe Kuler

Colr.org
Color Meanings
Color Theory for Designers Colour Lovers

Color Meanings across cultures
Color Meanings
Color Wheel Pro: Color Meaning


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


Design Principles:
Now They’ll Believe You!


The study of visual opposition.
“If two items are not exactly the same, then make them different.
Really different.”

CONTRAST


Contrast


Contrast

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


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


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

REPETITION


Repetition
• Adds consistency
• Unifies all parts of a design
• Organizes information
• Repetition develops the
organization and creates a strong
brand


Repetition
Repeated elements are
inherent in SharePoint.

Web part headers,
navigation elements,
etc


Repetition
Repeated elements are
inherent in SharePoint.

Web part headers,
navigation elements,
etc

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


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.

ALIGNMENT


Alignment
Don't center or justify lines of
text

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


Alignment: Example


Alignment: Corrected


More Examples…


More Examples…

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


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.

PROXIMITY


Proximity
Grouping several elements in
close proximity they become one
unit

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


Proximity Example: Good


Proximity Example: Poor


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


Design Principles

SHAREPOINT EXAMPLES
IN ACTION

People to People


Advanced Distributed Learning


Fluor


Avista


Cadence


MyClubMyLife.com


Resources: Podcasts
UXNet Podcast
UIE: Brain Sparks
Boagworld


Resources: Visual Design
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 Standard Web Components
boxesandarrows.com 10 Useful Usability Findings and
Guidelines
uxmatters.com
20 Do‟s and Don‟ts of Effective
uxmag.com Web Design
thegridsystem.org Introduction to Good Usability
Usability.gov
Usability.net
Usability Professional‟s
Association
Universal Usability Guidelines


Resources: Books


Where To Find Me

Resources and epiphanies in
140 characters or less.

http://thesharepointmuse.com


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


Designing Intuitive SharePoint Sites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Designing Intuitive SharePoint Sites

Ähnlich wie Designing Intuitive SharePoint Sites (20)

Mehr von Marcy Kellar

Mehr von Marcy Kellar (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing Intuitive SharePoint Sites

Hinweis der Redaktion