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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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
• 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.
• 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