Designing Intuitive SharePoint Sites
Post on 17-Aug-2014
34665 Views
Preview:
DESCRIPTION
Transcript
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
“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
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
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
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 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
Advanced Distributed Learning
1/30/2010 @marcykellar
Fluor
1/30/2010 @marcykellar
Avista
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
top related