High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
Designing Intuitive SharePoint Sites
1. 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
2. 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
3. Topics To Cover
• Intuitive Sites
• Usability Best Practices
• Color
• Visual Design Principles
• Q&A
1/30/2010 @marcykellar
7. Defining the Intuitive Factor
What Your Users What You Want
Already Know Your Users To Do
Current Target
Knowledge Knowledge
1/30/2010 @marcykellar
8. Defining the Intuitive Factor
What Your Users What You Want
Already Know Your Users To Do
GAP
Current Target
Knowledge Knowledge
1/30/2010 @marcykellar
9. Users spend most of their
time on other sites
Jakob's Law of the Web User Experience
1/30/2010 @marcykellar
10. What Users Expect: Conventions
Found at Universal Usability Guidelines
1/30/2010 @marcykellar
11. 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
12. 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.
1/30/2010 @marcykellar
13. 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
14. "Know thy user, and you are not
thy user."
~ Arnie Lund
1/30/2010 @marcykellar
15. 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
1/30/2010 @marcykellar
16. 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
1/30/2010 @marcykellar
17. What You Design For…
Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability
1/30/2010 @marcykellar
18. The Reality…
Steve Krug, Don‟t Make Me Think: A Common Sense Approach to Web Usability
1/30/2010 @marcykellar
19. 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
20. 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
34. 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
1/30/2010 @marcykellar
37. 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
1/30/2010 @marcykellar
39. 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
41. Avoid High Contrast Text on
Dark Backgrounds
Ouch… Make it Stop
1/30/2010 @marcykellar
42. 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
1/30/2010 @marcykellar
43. Design Principles
The principles of design are guidelines used for putting
elements together to create effective communication
1/30/2010 @marcykellar
45. The study of visual opposition.
“If two items are not exactly the same, then make them different.
Really different.”
CONTRAST
1/30/2010 @marcykellar
47. Contrast
Contrast sometimes is used
inappropriately or
inadvertently in SharePoint
thanks to the rich text editor.
1/30/2010 @marcykellar
48. 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
49. 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
1/30/2010 @marcykellar
50. Repetition
• Adds consistency
• Unifies all parts of a design
• Organizes information
• Repetition develops the
organization and creates a strong
brand
1/30/2010 @marcykellar
51. Repetition
Repeated elements are
inherent in SharePoint.
Web part headers,
navigation elements,
etc
1/30/2010 @marcykellar
52. 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
1/30/2010 @marcykellar
53. 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
54. 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
1/30/2010 @marcykellar
55. 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.
1/30/2010 @marcykellar
59. More Examples…
Can you spot the issues?
1/30/2010 @marcykellar
60. 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
61. 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
1/30/2010 @marcykellar
62. Proximity
Grouping several elements in
close proximity they become one
unit
We change our perception and
see these 4 elements as 2 groups
1/30/2010 @marcykellar
66. 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
67. Design Principles
SHAREPOINT EXAMPLES
IN ACTION
1/30/2010 @marcykellar
81. 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
1/30/2010 @marcykellar
82. 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
1/30/2010 @marcykellar
84. Where To Find Me
Resources and epiphanies in
140 characters or less.
http://thesharepointmuse.com
1/30/2010 @marcykellar
85. 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
Hinweis der Redaktion
About Me: Marcy KellarWorking atPointBridge as a user interface consultant. Diverse background in life sciences, psychology, data management and technologyOver four years experience in SharePoint architecture planning and implementationOver twenty years experience in fine art and visual design
I have ADD and often find myself running on autopilot. The success of my day-to-day activities can be dependent on the intuitiveness of the products in my life. The impact of not having an intuitive keyholder can be felt throughout those connected to me in my life. Let’s say I pull in my garage and I’m on the phone. I’m listening to the person on the other end and as I exit my car and walk in the door, I’m on autopilot. If I don’t have a key holder that is just intuitive to use, I may walk right by my key holder without putting my keys on it. I may not be able to find my keys when I am rushing out the door to my next appointment.
SThe message here is that intuitive is based on the user. It’s personal. What’s intuitive to one group of users may not be intuitive to another group.
Webster’s dictionary states that Intuitive means readily learned or understood. How do you determine what is readily understood? Is it the same for everyone?
To make something more intuitive you must understand what your users alerady know and what you want them to do.
Follow Web Conventions to Better Meet User Expectations and Make Site Intuitive