SlideShare uma empresa Scribd logo
1 de 201
Baixar para ler offline
WHAT IS USABILITY TESTING?
Website Usability | Day 3
WELL, WHAT IS USABILITY?
“Usability really just means making sure that something
works well: that a person of average (or even below average)
ability and experience can use the thing - whether it's a Web
site, a fighter jet, or a revolving door - for its intended
purpose without getting hopelessly frustrated.”
                                                (Steve Krug)
USABILITY TESTING
Testing is a technique to ensure that the intended users can
perform the intended tasks efficiently, effectively and
satisfactorily. Without frustration!
WHAT TOOLS ARE AVAILABLE?
 Surveys
 Interviews
 Eyetracking studies
 Usability testing
 Online testing tools
SURVEYS
Allow users to review the site.
Distribute surveys.
Ask them to answer questions

         Survey
INTERVIEWS
Allow users to review the site.
Make user comfortable.
Ask users questions.
See handout.
        Interview
EYETRACKING STUDIES
EYETRACKING AND THE EYE
Eyetracking is following the trail of where a person is looking.
Equipment can be built into the computer.
Eyetracking software keeps track of what’s on screen while
user is looking at it.


  How does it work?
FIXATION
When the eye is resting on something.
Last between one-tenth and one-half.
Red spots are fixations.
SACCADES
The eye’s rapid movements from one fixation to the next.
Last between one-hundredth and one-tenth of a second.
Thin red line connecting the dots are saccades between
fixations.


  Eyetracking Study
HEAT MAPS
Visualization technique for eyetracking studies.
A color-coded screenshot that shows the user’s fixations.
Red: where users looked most.
Yellow: indicate fewer fixations.
Blue: indicate least view areas.
Gray: no fixations.                 Facebook Heatmap
F - PATTERN
Website Usability | Day 3
Website Usability | Day 3
BANNER BLINDNESS
USERS FOCUS ON FACES
USERS FOCUS ON FACES
Website Usability | Day 3
USABILITY TESTING
Series of tasks for participants to perform on an actual
website or prototype.
Tasks are formulated from user and business goals.
Measures the success of failure of a design.
What you need?
Pen and clipboard, computer with Internet connection,
perhaps a tape recorder.
STEPS
#1 INTRODUCTION (5-10 MINS)
Make participant feel comfortable.
Let them know they can have a break any time.
If video taping, get permission.
Ask questions about them – include demographics,
occupation, education level, Internet experience.
Explain equipment if necessary.
Assure them that there is no right or wrong.
#2 TASKS (10 - 15 MINS )
Be sure to read the task aloud.
Encourage participant to think aloud.
Have a written version that you leave in front of the user.
DO NOT HELP THE USER THROUGH THE TASK.
No small talk!
TECHNOLOGY
Morae®: A recorder that captures onscreen activity of the
user’s computer and a camera video of the user.
Creates a synchronized index of events occurring behind the
scenes in applications and in the operating system.


    Morae Website
COMMON ERRORS
Strategic Errors - premature testing, not enough time or
will to make changes.
Inadequate Planning - do a pilot test to uncover problems
with plan and materials.
Read script aloud.
Allow enough time between test sessions (minimum 30
minutes)
COMMON ERRORS
Poor Task Design - test core functionality and areas
identified as problematic.
If scenarios were used, convert into tasks to ensure key
interactions are studied.
Accidental Revelation - revealing too much. Watch your
language.
Unprofessional Demeanor - need to be professionally
detached and neutral. Don’t finish user’s sentence!
TEST PARTICIPANTS
Get representative users - Craig’s list, LinkedIn,employment
agencies, market research agencies.
Use questionnaires to screen.
Offer incentives.
Send reminders.
ENVIRONMENT
TEST PARTICIPANTS
Schedule 5 - 8 users.
Only need 5 - account for no shows, botched tests.
Test up to 3 groups of 5 - 1 test after iterations made.
http://www.xperienceconsulting.com/en/research/lab_usability_test.php
http://happyuser.xperienceconsulting.com/tag/test-de-usuarios/
http://usit.com.au/introducing-cider-or-why-i-dont-like-the-term
USING THE DATA
USING THE DATA
Transform both qualitative and quantitative data to make
recommendations
QUANTITATIVE DATA
Any information that can be measured:
Ease of use
Satisfaction
Verbal descriptions of people’s experiences
Examples: The time it takes to complete a task, or the
completion rate of a task.
QUALITATIVE DATA
Information that requires interpretation
Identifies trends or categories of user’s behavior
Example: How well users can complete a task
Where they are encountering problems
Level of frustration
COMB THE DATA
FROM INTERVIEWS
 Preferences
 Needs
 Stories
 Current Behaviors
 Pain Points
 Satisfaction Level
FROM USER TESTING
 Success
 New Behaviors
 Usage Patterns
 Pain Points
 Time to complete
 Assists required
ONLINE TESTING
 TESTING SITES
 - Usabilla
 - Infomaki
 - Chalkmark
 CARD SORTING
 - Optimal Sort
 - XSort (desktop app for Mac)
 NAVIGATION TESTING
 - Treejack
 - Five Second Test
ORGANIZING THE DATA
Organize the data into categories or findings.
Find themes and put in table.
Website Usability | Day 3
Website Usability | Day 3
Website Usability | Day 3
AFFINITY DIAGRAMS
Organizes items into common themes.
Helpful when you have a large amount of data.
You have many facts or ideas in apparent chaos.
When issues seem too large and complex.
When group consensus is needed.
AFFINITY DIAGRAMS
 1. Record each idea on sticky note and layout on wall
 2. Look for groups
 3. Repeat till all notes are grouped
 4. If a note seems to belong in two groups, make a second note
 5. Discuss patterns and reason for groupings
 6. Find headers
Website Usability | Day 3
Website Usability | Day 3
SPREADSHEETS
Use to track stories, needs, pain points, successes
Provides Quantitative layer over Qualitative information
More difficult to collaborate than affinity diagrams


        Example
WORKSHOP # 1 - USABILITY TEST
  Please break into twos. Person A tests Person B
  Follow format:
  Orientation
  Tasks - read aloud to participant
        - careful not to “help”
        - be sure to ask about expectations
        - let mistakes happen
  Debriefing
WORKSHOP # 1 - USABILITY TEST
  Anything surprise you?
  Any new insight?
  Anything go wrong?
  Was the site used in a way that you did not expect?
  Did you discover any usability problems?
WORKSHOP # 1a- USABILITY TEST
  Please break into twos. Person B tests Person A
  Follow format:
  Orientation
  Tasks - read aloud to participant
        - careful not to “help”
        - be sure to ask about expectations
        - let mistakes happen
  Debriefing
WORKSHOP # 1a - USABILITY TEST
  Anything surprise you?
  Any new insight?
  Anything go wrong?
  Was the site used in a way that you did not expect?
  Did you discover any usability problems?
DESIGNING FOR WEB USABILITY
USER EXPERIENCE
"User experience isn't a layer or component of a product or
service. It's really about the design of the whole systems and
their interconnections."
- Andre Hinton, Senior IA at Vanguard
WHY TEST?
If a user can’t find what a product, they won’t buy.
If they can’t find what they are looking for, they will look
elsewhere.
The holder of the mouse rules!
NAVIGATION & WAYFINDING
NAVIGATION
“Navigation isn’t just a feature of a website, it is the web site,
in the same way that the building, the shelves, and the
cash register are Sears. Without it, there’s no there there.”
-Steve Krug
WAYFINDING
Coined by Kevin Lynch in The Image of the City, 1960.
Describes the elements that allow us to navigate successfully
in cities and towns.
4 CORE COMPONENTS
1. Orientation: Where am I now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and
   understandable enough to know where I’ve been and to
   predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right
   place?
ELEMENTS OF MENTAL MAPS
1. Paths: streets, transit lines, canals, railroads - channels
that people regularly move.
2. Edges: physical barriers; walls, fences, rivers, shore -
boundaries that create linear breaks in continuity/separate
and relate two distinct regions.
3. Districts: Major sections of a city that have a common
identifying character: Chinatown, Wall Street, Greenwich
Village.
ELEMENTS OF MENTAL MAPS
4. Nodes: Intersections, enclosed squares, street corners,
subway stations - all serve as points of reference, transition
and destination.
5. Landmarks: Towering buildings, golden domes,
mountains, signs, storefronts, trees - physical objects that
serve as spatial reference points.
ON THE WEB
No sense of scale or movement in space.
No compass: no direction.
You are here: navigation interface.
Paths: lead the way: site navigation, breadcrumbs.
PATHS
Consistent, predictable navigational links.
Appear the same throughout the site.
Can be habitual.
Explicit elements: breadcrumbs.
EDGES & DISTRICTS
Effective interface design uses consistent page grid,
terminology, navigation links.
Uses visual flexibility to create identifiable regions and
edges within the larger space.
Landmarks along the way




REGION   REGION   REGION   REGION    REGION            REGION
NODES
The local coffee shop or Times Square?
Too much choice causes stress, slows decisions, makes us
less satisfied and more likely to walk away.
Website Usability | Day 3
LANDMARKS “YOU ARE HERE”
Search function cuts across all the normal wayfinding
boundaries.
Orientation cues are particularly important since users often
arrive at a page without having followed a deliberate and
repeatable path.
Headers: “You are here” markers
SUMMARY
1. Paths: create consistent, well-marked navigation paths.
2. Regions: create a unique but related identity for each
   site region.
3. Nodes: don’t confuse the user with too many choices.
4. Landmarks: use consistent landmarks in site navigation
   and graphics to keep the user oriented.

Web Style Guide, 3rd Edition
PAGE LAYOUT
ELEGANCE & SIMPLICITY
Use economy of expression.
Most powerful designs are result of a process of
simplification and refinement.
MINIMALISM
“A designer knows he has achieved perfection not when
there is nothing left to add, but when there is nothing left to
take away.”

- Anoine de Saint Exupéry
-
Website Usability | Day 3
ADVANTAGES
 Approachability: easy to tell at a glance what it is and designs
 invite further exploration.
 Recognizability: recognized easily, easily assimilated,
 understood and…REMEMBERED.
 Immediacy: have greater impact because they can be
 immediately recognized and understood with minimal effort.
 Usability: simplicity enhances usability.
PRINCIPLES
 Unity
 Refinement
 Fitness
 All the elements must be unified to produce a coherent
 whole. The parts and whole must be refined to focus user
 attention and the fitness of the solution to the
 communication problem must be ensured at every level.
HOW
 Reduction
 Regularization
 Leverage
 Reduce the design to its essence, regularize the elements of
 the design, then combine them for maximum leverage.
INFORMATION...
... consists of differences that make a difference.
- Edward Tufte, Envisioning Information
SCALE, CONTRAST, PROPORTION
The subtle interrelationship of scale, contrast and
proportion can be seen in all harmonious designs.
SCALE
Describes the relative size of a design element in relation to
the other design elements and the composition as a whole.
Website Usability | Day 3
Website Usability | Day 3
CONTRAST
Results from the differences that can be seen between the
design elements.
Provides visual distinctions in: shape, size, color, texture,
position, orientation, and movement.
Website Usability | Day 3
Website Usability | Day 3
PROPORTION
Determines the balance and harmony of the relationship
between the elements.
Website Usability | Day 3
Website Usability | Day 3
ORGANIZATION & STRUCTURE
Provide the user with visual pathways needed to experience
a site in a systematic way.
Must be introduced by establishing relationships among the
design elements.
Website Usability | Day 3
PRINCIPLES
 Grouping
 Hierarchy
 Relationships
 Balance
GROUPING
Start by grouping display elements into higher order units.
(Note: words in a book are grouped into columns,
paragraphs, sections etc).
Higher-level structures orient the user.
Binds functional units tightly together.
Use spacing and alignment for effectiveness.
Website Usability | Day 3
HIERARCHY
Eye looks for visual hierarchies for orientation.
Most important elements must be large enough to draw the
viewer closer.
Specifics follow.
Website Usability | Day 3
RELATIONSHIPS
Grouping and hierarchy are reinforced when visual
elements are related.
Position, size and value provide visual cues.
Alignment helps form visual relations.
Website Usability | Day 3
BALANCE
Ensures that the elements remain stable in their position on
the page.
A composition is balanced when the visual weight of the
elements on either side of the piece are approximately equal.
Website Usability | Day 3
WORKSHOP # 2 - PAGE LAYOUT
  Please break into three groups.

  Find websites that illustrate:
  1. Scale                         5. Grouping
  2. Contrast                      6. Hierarchy
  3. Proportion                    7. Relationships
  4. Organization & Structure      8. Balance
HOMEPAGES
FIRST CHANCE
can be your first (and possibly last) chance to attract a user
Website Usability | Day 3
IDENTITY
include a tag line that summarizes what the company does
Website Usability | Day 3
Website Usability | Day 3
FRONT PAGE
should be like the front page of a newspaper
Website Usability | Day 3
TELL YOUR STORY
should say who you are, what you do or what products your
    offer and what sets you apart from the competition
Website Usability | Day 3
SHOW COMPANY LOGO
Website Usability | Day 3
Website Usability | Day 3
PRIORITY
emphasize highest priority tasks so there is a clear starting point
Website Usability | Day 3
SHOULD BE UNIQUE
design to be clearly different from all other pages on the site
Website Usability | Day 3
Website Usability | Day 3
Website Usability | Day 3
Website Usability | Day 3
ESTABLISH TRUST & CREDIBILITY
Website Usability | Day 3
HAVE CLEAR NAVIGATION
Website Usability | Day 3
THE FINE PRINT
group all corporate information in one distinct area
Website Usability | Day 3
INCLUDE SEARCH BAR
Website Usability | Day 3
CALLS TO ACTION
reveal site content with calls to action
Website Usability | Day 3
USE MEANINGFUL GRAPHICS
Website Usability | Day 3
DESIGN CONVENTIONS
Link to home page                              Primary location for search, shopping carts




                    LOGO
                                                                  Calender | A-Z Index    Search This Site   GO
                                                                                                                      Navigation and search
                                        The tagline would go here...                                                  Identity and titles
         Header
                                                                                                                      Navigation links
                                                                  Navigation | Navigation | Navigation | Navigation   Tab navigation

                                             Selected Tab      Unselected Tab      Unselected Tab

                       Navigation           Home page > Section > Page                         Breadcrumb trail       Alternate right location
                       Navigation                                                                                     for scan column
                       Navigation                                                                                     navigation and search
Local Navigation
                       Navigation

                       Navigation                                                                                     Common location for
                       Navigation                                                                                     banner ads
                       Navigation

                       Navigation




        Search,
    banner ads,      Left scan column                                                           Right scan column
                                                         Main content column
        contact         (optional)                                                                  (optional)
    information




                                                                                                                      Contact information,
         Footer             Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555
                                                                                                                      copyrights, dates
WEB STANDARDS
“The experienced web designer, like the talented newspaper
art director, accepts that many projects she works on will
have headers and columns and footers. Her job is not to
whine about emerging commonalities but to use them to
create pages that are distinctive, natural, brand-appropriate,
subtly memorable and quietly but unmistakably engaging.”

- Jeffery Zeldman
-
ABOVE THE FOLD
Above the fold - a graphic design concept that refers to the
location of an important news story or a visually appealing
photograph on the upper half of the front page of a
newspaper.
In web design, top 600 to 700 pixels (on 19” - 22” monitor)
Just a guideline.
Website Usability | Day 3
Website Usability | Day 3
BREAKING THE RULES
More sites now will put important content beneath the fold.
People will scroll if the content is interesting.



         37signals                      Acumen Fund


                           Zipcare
PURPOSE OF GRAPHIC DESIGN
Unlike a print, web users interact with information.

GUI (graphic user interface) must convey function and
meaning.

Graphics are integral to the user’s experience.
PURPOSE OF GRAPHIC DESIGN
Create visual hierarchy so you can see what’s important.
Define functional regions of the page.
Group page elements that are related, so you can see
structure in the content.
CONSISTENT LAYOUT
Header - mini versions of the homepage.
Footer - about house keeping and and legal matters.
Global Navigation
Local Navigation
Content, Features, Products
Banner Ads
PAGES SHOULD INCLUDE
 Informative title
 Identity
 Copyright statement
 Link back to home
 Navigational links
 Heading or title to clarify content
 Link to contact information
 Alternate (alt) text identifying graphics on the page
WHAT GOES INTO A HEADER?
 Site identity
 Major navigation links/utility navigation
 Search box (not always)
 Link back to home
POSSIBLE HEADER COMPONENTS
Individual designs rarely use them all.

     Advertising                                                             Search This Site   GO           Cart


                                                                    Navigation | Navigation | Navigation | Navigation



     LOGO          Site titles, section identity, or advertising


                   Selected Tab   Unselected Tab   Unselected Tab
Variations
Website Usability | Day 3
WHAT GOES INTO A FOOTER?
 Contact information.
 Copyright statement.
 Page author.
 Links to related sites or to larger enterprise.
 Utility links can go here.
 Redundant navigation for long pages.
Website Usability | Day 3
WRITING FOR THE WEB
CONTENT IS KING
“Ultimately, users visit your website for its content.
Everything else is just the backdrop. The design is there to
allow people access to the content.”
- Jakob Nielsen
-
PAPER VERSUS MONITOR
Because screen resolution is low (72 to 110 dpi), it places a
strain on the human eye.

Because we read on a screen, we are forced to view from a
more or less fixed position - with print you can read
anywhere in any position.

Can lay papers out on the floor. (Can’t do a search though.)
PAPER VERSUS MONITOR
Screen glare is not an obstacle when reading on paper.

Monitor Flick: looks like a solid image, but the screen is
refreshing so fast that you are fooled into seeing a solid
image, but the brain is alway correcting for the flicker.

Reading is 25% slower on a screen. (Jacob Nielsen)
READING ON THE WEB
 - Scrolling is clumsy - people don’t like it and they lose their place.
 - Readers scan on-screen, then print content for reading.
 - Web reading is not stationary - text jumps from link to link and
 page to page.
 - Many web pages end up as fragments of information taken from
 larger context.
3 GUIDELINES
  1. Be succinct - write no more than 50% of the test that you
  would have used in print.
  2. Write for scanability - use short paragraphs, subheadings,
  bulleted lists.
  3. Use hypertext to split up long information into multiple pages.
SCANABILITY
 - Studies show that almost 80% of users initially scan a
 webpage.
 - Users pick out key words, sentences and paragraphs of
 interest - They skip over the text they are not concerned with.
 - Write articles with two or three levels of headlines for easy
 scanability.

 - Use general page headings plus subheads and sub-subheads
 if needed.
SCANABILITY
 - Use meaningful headlines - Tell the user what the page or
 section is about.
 - Use bulleted lists and similar design elements to break text
 blocks.
 - Use highlighting and emphasis to catch the user's eye.

 - Be sure to distinguish from link colors so as to avoid confusion.
USE PLAIN LANGUAGE
 - Start each page with the conclusion - most important material
 should come up front.
 - Users should be able to tell in a glance what the page is about.
 - Users often only read the first line of a paragraph - use topic
 sentences, one idea per paragraph.
 - Use simple sentence structure - avoid convoluted writing and
 complex words.
 - Use caution with metaphors and humor - readers may take you
 literally.
CHUNKING
 - Use hyperlinks to make text short.
 - Keep links visible, ideally above the fold.
 - Split the information into “chunks” that focus on a certain topic.
 - Move long, detailed info to secondary pages.
 - Avoid using links to break long articles into separate pages - is
 disruptive and makes printing difficult.
HEADLINES
 - Online headlines are different than printed headlines.
 - Online headlines are often displayed out of context: as part of
 an article, in a search list, in a bookmark list.
 - Headline must stand on it’s own even when the rest of content
 is unavailable.
 - Online headlines and their content are often hard to see in a
 single glance on the window so it is difficult for the user to
 learn enough just from the surrounding data.
LEGIBILITY
  Use colors that have a high contrast between the text and the
  background.
  Use plain color-backgrounds or subtle patterns.
  Use fonts big enough that people can read.
  Make the text stand still – moving blinking or zooming text is
  hard to read.
  Keep sentences to 7 - 10 words as that is what the eye can
  comfortably track.
LEGIBILITY
  Try to left justify text when possible.
LEGIBILITY
  AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS
  10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER
  FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE
  UNIFORM AND BLOCKY APPEARANCE. DON'T DO IT.
  Legibility depends on the tops of all the letters.
  Legibility depends on the tops of all the letters.
  2. Use plain color-backgrounds or subtle patterns.

  3. Use fonts big enough that people can read.
  4. Make the text stand still – moving blinking or zooming text is hard to read.
REMEMBER
 Explain what the article is about in terms that relate to the user.
 Write in plain language.
 Avoid teasers that try to entice people to click.
 Try to make the first word an important, information-carrying one.
WORKSHOP # 3 HEADLINES
  Stay in your groups.

  Remove every word you can from the passages below and create
  a catching headline.
  1. Government officials involved in the Olympics call it a
  fiasco, that is, the extent of chaos that has thrown security
  plans into disarray upon learning that of the shortfall of
  civilian guards.
  2. If “Ghosts in the Machine” an ambitious exhibition at the
  Met were itself a machine, it would have lots of moving
  parts but not all would be performing with equal
  efficiency.
  3. Apple announced that its’ bestselling MacBook laptop
  just got its newest makeover. It’s a thing of beauty, clad in
  aluminum like its more expensive Pro siblings. A
WEB TYPOGRAPHY
TYPOGRAPHY
Typography is the process of arranging letters, many
terms are left over from the days of letterpress

On computers we use fonts, whether for digital printing or
on the web.
HISTORY OF WEB TYPOGRAPHY
At first browsers had no way of embedding fonts.
1995: Netscape introduces <font> tag
1998: CSS2 allows for more type configuration
2005: CSS3 introduces @font-face, allowing fonts to be
hosted online
WEB-SAFE FONTS
Come preinstalled on most computers.

Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma
Times New Roman, Verdana
@FONT-FACE
Lets the browser load a font from a remote server, meaning
that pages can display text in the specified font even if the
user does not have it installed on their computer.
Allows for greater design customization without sacrificing
accessibility or SEO.
IMAGE REPLACEMENT
Good for logos. Bad for accessibility and SEO.
CHOOSING THE RIGHT FONT
SERIF VS SANS SERIF
Serif
Sans Serif
Slab Serif
Display
HEADERS VS COPY
You can use decorative fonts for headers...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales,
sapien ut porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu
orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla at
felis eget neque aliquam convallis.
X-HEIGHT
Lorem ipsum Lorem ipsum
Lorem ipsum dolor sit amet, consectetur            Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut       adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id       porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros,    eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla   rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis.             at felis eget neque aliquam convallis.
OUR FAVORITES
Our favorite web fonts available for free from Google Fonts.

Open Sans Open Sans Open Sans Open Sans Open Sans

Lato Lato Lato Lato
Lora Lora Lora Lora
Vollkorn Vollkorn Vollkorn Vollkorn
WEB TYPOGRAPHY TIPS
INCREASE LEADING
Line height should be at least 120% of font size.

Lorem ipsum dolor sit amet, consectetur            Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut       adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id
                                                   porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla   eleifend est nulla eu orci. Mauris lectus eros,
at felis eget neque aliquam convallis.             rutrum at lobortis ut, eleifend eget eros. Nulla
                                                   at felis eget neque aliquam convallis.
DO
Website Usability | Day 3
DON’T
Website Usability | Day 3
MAINTAIN LEGIBILITY
Light colors are hard to read, even on white. Beware of #666.

Lorem ipsum dolor sit amet, consectetur            Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut       adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id       porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros,    eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla   rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis.             at felis eget neque aliquam convallis.



Test your legibility with AccessColor.
DO
Website Usability | Day 3
DON’T
Website Usability | Day 3
COLUMN WIDTH
The eye can only comfortable track 7-10 words per line,
which is about 40 to 80 characters.

Multiply your text size by 30 to determine maximum
column width.

10px type x 30 = 300px column width
DO
Website Usability | Day 3
DON’T
Website Usability | Day 3
IMPLEMENT HIERARCHY
Use multiple typefaces to differentiate between elements on
the page.

Mix between categories (serif, sans serif, slab serif, display)

Don’t go too crazy! Don’t use more than 2 or 3 fonts.
DO
Website Usability | Day 3
DON’T
Website Usability | Day 3
RESOURCES FOR WEB FONTS
GOOGLE WEB FONTS
FONTSQUIRREL
TYPEKIT
WORKSHOP # 4 CREATE SITE
  Please go into the group you worked with when creating
  personas.

  CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND
  SCENARIOS.
  What content would the user you defined find on the site?
  Establish content
  Establish information architecture
  Create site map
  Create navigation
  Create wireframes or other prototype
  Do a prototype test
  Make improvements
WORKSHOP #4 SCENARIOS
  GROUP #1:
  Site is to provide info for people starting own business; some of them
  have experience in he business world; others this is their first
  exposure to issues running a business.
  GROUP #2:
  Site is to provide info for people looking to place parents in assisted
  living.
  GROUP #3:
  Site is to provide info for people looking to compare car insurance.

Mais conteúdo relacionado

Mais procurados

3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom WebinarUserZoom
 
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA International
 
Content Structure & UX Guide by Kayak
Content Structure & UX Guide by KayakContent Structure & UX Guide by Kayak
Content Structure & UX Guide by KayakKayak Marketing
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture HeuristicsAbby Covert
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyDoralin Kelly
 
UX Toolkit: Phase Two - Structure
UX Toolkit: Phase Two - StructureUX Toolkit: Phase Two - Structure
UX Toolkit: Phase Two - StructureMaite Dalila
 
User Interface and User Experience - A Process and Strategy for Small Teams
User Interface and User Experience - A Process and Strategy for Small TeamsUser Interface and User Experience - A Process and Strategy for Small Teams
User Interface and User Experience - A Process and Strategy for Small TeamsDamon Sanchez
 
UX Workshop for Fin-Tech startups @ SBC
 UX Workshop for Fin-Tech startups @ SBC UX Workshop for Fin-Tech startups @ SBC
UX Workshop for Fin-Tech startups @ SBCDoralin Kelly
 
Session 1: UX Process + Interviewing
Session 1: UX Process + InterviewingSession 1: UX Process + Interviewing
Session 1: UX Process + InterviewingLeanna Gingras
 
Usability Testing
Usability TestingUsability Testing
Usability TestingAndy Budd
 
How to Master UX Testing in an Agile Design Process
How to Master UX Testing in an Agile Design ProcessHow to Master UX Testing in an Agile Design Process
How to Master UX Testing in an Agile Design ProcessUserZoom
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Careerdpanarelli
 
Zoe's UX Portfolio
Zoe's UX PortfolioZoe's UX Portfolio
Zoe's UX PortfolioZoe Lewis
 
Intro to User eXperience
Intro to User eXperienceIntro to User eXperience
Intro to User eXperienceMike Gallers
 
UX Masterclass at muru-D
UX Masterclass at muru-DUX Masterclass at muru-D
UX Masterclass at muru-DDoralin Kelly
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersAndrew Mottaz
 

Mais procurados (20)

Intro to UX UI Presentation at StartCo - May 24, 2017
Intro to UX UI Presentation at StartCo - May 24, 2017Intro to UX UI Presentation at StartCo - May 24, 2017
Intro to UX UI Presentation at StartCo - May 24, 2017
 
3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar3 Methods to Master Agile UX Testing | UserZoom Webinar
3 Methods to Master Agile UX Testing | UserZoom Webinar
 
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over Time
 
Web Usability
Web UsabilityWeb Usability
Web Usability
 
Content Structure & UX Guide by Kayak
Content Structure & UX Guide by KayakContent Structure & UX Guide by Kayak
Content Structure & UX Guide by Kayak
 
Usability basics
Usability basicsUsability basics
Usability basics
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
 
UX Toolkit: Phase Two - Structure
UX Toolkit: Phase Two - StructureUX Toolkit: Phase Two - Structure
UX Toolkit: Phase Two - Structure
 
User Interface and User Experience - A Process and Strategy for Small Teams
User Interface and User Experience - A Process and Strategy for Small TeamsUser Interface and User Experience - A Process and Strategy for Small Teams
User Interface and User Experience - A Process and Strategy for Small Teams
 
UX Workshop for Fin-Tech startups @ SBC
 UX Workshop for Fin-Tech startups @ SBC UX Workshop for Fin-Tech startups @ SBC
UX Workshop for Fin-Tech startups @ SBC
 
Session 1: UX Process + Interviewing
Session 1: UX Process + InterviewingSession 1: UX Process + Interviewing
Session 1: UX Process + Interviewing
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
How to Master UX Testing in an Agile Design Process
How to Master UX Testing in an Agile Design ProcessHow to Master UX Testing in an Agile Design Process
How to Master UX Testing in an Agile Design Process
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
 
Zoe's UX Portfolio
Zoe's UX PortfolioZoe's UX Portfolio
Zoe's UX Portfolio
 
Intro to User eXperience
Intro to User eXperienceIntro to User eXperience
Intro to User eXperience
 
UX Masterclass at muru-D
UX Masterclass at muru-DUX Masterclass at muru-D
UX Masterclass at muru-D
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
UXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and DevelopersUXPA Lean UX Bridging the gap between UX and Developers
UXPA Lean UX Bridging the gap between UX and Developers
 

Semelhante a Website Usability | Day 3

Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1studiokandm
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1studiokandm
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In MindCenergyDave
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
Usability Testing and QA 7-18-14
Usability Testing and QA 7-18-14Usability Testing and QA 7-18-14
Usability Testing and QA 7-18-14Shilpa Thanawala
 
Usability Show+Tell
Usability Show+TellUsability Show+Tell
Usability Show+Tellgcotrell
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really wantleisa reichelt
 
How to do usability testing and eye tracking
How to do usability testing and eye trackingHow to do usability testing and eye tracking
How to do usability testing and eye trackingObjective Experience
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to KnowPravin Mehta
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysSTC India UX SIG
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their inputRandy Earl
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web SeminarExperience Dynamics
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?Ann Krause
 
Tech. Writing Usability Presentation
Tech. Writing Usability PresentationTech. Writing Usability Presentation
Tech. Writing Usability Presentationmhobren
 
Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Shilpa Thanawala
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts
 

Semelhante a Website Usability | Day 3 (20)

Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
 
Ux, UI and US v1.2
Ux, UI and US v1.2Ux, UI and US v1.2
Ux, UI and US v1.2
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
UX is for Losers
UX is for LosersUX is for Losers
UX is for Losers
 
Usability Testing and QA 7-18-14
Usability Testing and QA 7-18-14Usability Testing and QA 7-18-14
Usability Testing and QA 7-18-14
 
Usability Show+Tell
Usability Show+TellUsability Show+Tell
Usability Show+Tell
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
 
How to do usability testing and eye tracking
How to do usability testing and eye trackingHow to do usability testing and eye tracking
How to do usability testing and eye tracking
 
Module 10: Usability Testing
Module 10: Usability TestingModule 10: Usability Testing
Module 10: Usability Testing
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their input
 
What ux is
What ux isWhat ux is
What ux is
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?
 
Tech. Writing Usability Presentation
Tech. Writing Usability PresentationTech. Writing Usability Presentation
Tech. Writing Usability Presentation
 
Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15Usability Testing and QA 12 11-15
Usability Testing and QA 12 11-15
 
Andrea Roberts UX Portfolio
Andrea Roberts UX PortfolioAndrea Roberts UX Portfolio
Andrea Roberts UX Portfolio
 

Mais de studiokandm

Web Intensive Week 3 - Day 5
Web Intensive Week 3 - Day 5Web Intensive Week 3 - Day 5
Web Intensive Week 3 - Day 5studiokandm
 
Web Intensive Week 3 - Day 4
Web Intensive Week 3 - Day 4Web Intensive Week 3 - Day 4
Web Intensive Week 3 - Day 4studiokandm
 
Web Intensive Week 3 - Class 03
Web Intensive Week 3 - Class 03Web Intensive Week 3 - Class 03
Web Intensive Week 3 - Class 03studiokandm
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2studiokandm
 
What is Usability?
What is Usability?What is Usability?
What is Usability?studiokandm
 
Website Usability | Day 4
Website Usability | Day 4Website Usability | Day 4
Website Usability | Day 4studiokandm
 
Website Usability | Class 1
Website Usability | Class 1Website Usability | Class 1
Website Usability | Class 1studiokandm
 
Website Usability | Day 2
Website Usability | Day 2Website Usability | Day 2
Website Usability | Day 2studiokandm
 
Seeing Red: Design Inspiration
Seeing Red: Design InspirationSeeing Red: Design Inspiration
Seeing Red: Design Inspirationstudiokandm
 
Is your website user friendly?
Is your website user friendly?Is your website user friendly?
Is your website user friendly?studiokandm
 

Mais de studiokandm (10)

Web Intensive Week 3 - Day 5
Web Intensive Week 3 - Day 5Web Intensive Week 3 - Day 5
Web Intensive Week 3 - Day 5
 
Web Intensive Week 3 - Day 4
Web Intensive Week 3 - Day 4Web Intensive Week 3 - Day 4
Web Intensive Week 3 - Day 4
 
Web Intensive Week 3 - Class 03
Web Intensive Week 3 - Class 03Web Intensive Week 3 - Class 03
Web Intensive Week 3 - Class 03
 
NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2NYU Web Intensive - Week 3 Class 2
NYU Web Intensive - Week 3 Class 2
 
What is Usability?
What is Usability?What is Usability?
What is Usability?
 
Website Usability | Day 4
Website Usability | Day 4Website Usability | Day 4
Website Usability | Day 4
 
Website Usability | Class 1
Website Usability | Class 1Website Usability | Class 1
Website Usability | Class 1
 
Website Usability | Day 2
Website Usability | Day 2Website Usability | Day 2
Website Usability | Day 2
 
Seeing Red: Design Inspiration
Seeing Red: Design InspirationSeeing Red: Design Inspiration
Seeing Red: Design Inspiration
 
Is your website user friendly?
Is your website user friendly?Is your website user friendly?
Is your website user friendly?
 

Último

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Último (20)

VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

Website Usability | Day 3

  • 1. WHAT IS USABILITY TESTING?
  • 3. WELL, WHAT IS USABILITY? “Usability really just means making sure that something works well: that a person of average (or even below average) ability and experience can use the thing - whether it's a Web site, a fighter jet, or a revolving door - for its intended purpose without getting hopelessly frustrated.” (Steve Krug)
  • 4. USABILITY TESTING Testing is a technique to ensure that the intended users can perform the intended tasks efficiently, effectively and satisfactorily. Without frustration!
  • 5. WHAT TOOLS ARE AVAILABLE? Surveys Interviews Eyetracking studies Usability testing Online testing tools
  • 6. SURVEYS Allow users to review the site. Distribute surveys. Ask them to answer questions Survey
  • 7. INTERVIEWS Allow users to review the site. Make user comfortable. Ask users questions. See handout. Interview
  • 9. EYETRACKING AND THE EYE Eyetracking is following the trail of where a person is looking. Equipment can be built into the computer. Eyetracking software keeps track of what’s on screen while user is looking at it. How does it work?
  • 10. FIXATION When the eye is resting on something. Last between one-tenth and one-half. Red spots are fixations.
  • 11. SACCADES The eye’s rapid movements from one fixation to the next. Last between one-hundredth and one-tenth of a second. Thin red line connecting the dots are saccades between fixations. Eyetracking Study
  • 12. HEAT MAPS Visualization technique for eyetracking studies. A color-coded screenshot that shows the user’s fixations. Red: where users looked most. Yellow: indicate fewer fixations. Blue: indicate least view areas. Gray: no fixations. Facebook Heatmap
  • 17. USERS FOCUS ON FACES
  • 18. USERS FOCUS ON FACES
  • 20. USABILITY TESTING Series of tasks for participants to perform on an actual website or prototype. Tasks are formulated from user and business goals. Measures the success of failure of a design. What you need? Pen and clipboard, computer with Internet connection, perhaps a tape recorder.
  • 21. STEPS
  • 22. #1 INTRODUCTION (5-10 MINS) Make participant feel comfortable. Let them know they can have a break any time. If video taping, get permission. Ask questions about them – include demographics, occupation, education level, Internet experience. Explain equipment if necessary. Assure them that there is no right or wrong.
  • 23. #2 TASKS (10 - 15 MINS ) Be sure to read the task aloud. Encourage participant to think aloud. Have a written version that you leave in front of the user. DO NOT HELP THE USER THROUGH THE TASK. No small talk!
  • 24. TECHNOLOGY Morae®: A recorder that captures onscreen activity of the user’s computer and a camera video of the user. Creates a synchronized index of events occurring behind the scenes in applications and in the operating system. Morae Website
  • 25. COMMON ERRORS Strategic Errors - premature testing, not enough time or will to make changes. Inadequate Planning - do a pilot test to uncover problems with plan and materials. Read script aloud. Allow enough time between test sessions (minimum 30 minutes)
  • 26. COMMON ERRORS Poor Task Design - test core functionality and areas identified as problematic. If scenarios were used, convert into tasks to ensure key interactions are studied. Accidental Revelation - revealing too much. Watch your language. Unprofessional Demeanor - need to be professionally detached and neutral. Don’t finish user’s sentence!
  • 27. TEST PARTICIPANTS Get representative users - Craig’s list, LinkedIn,employment agencies, market research agencies. Use questionnaires to screen. Offer incentives. Send reminders.
  • 29. TEST PARTICIPANTS Schedule 5 - 8 users. Only need 5 - account for no shows, botched tests. Test up to 3 groups of 5 - 1 test after iterations made.
  • 34. USING THE DATA Transform both qualitative and quantitative data to make recommendations
  • 35. QUANTITATIVE DATA Any information that can be measured: Ease of use Satisfaction Verbal descriptions of people’s experiences Examples: The time it takes to complete a task, or the completion rate of a task.
  • 36. QUALITATIVE DATA Information that requires interpretation Identifies trends or categories of user’s behavior Example: How well users can complete a task Where they are encountering problems Level of frustration
  • 38. FROM INTERVIEWS Preferences Needs Stories Current Behaviors Pain Points Satisfaction Level
  • 39. FROM USER TESTING Success New Behaviors Usage Patterns Pain Points Time to complete Assists required
  • 40. ONLINE TESTING TESTING SITES - Usabilla - Infomaki - Chalkmark CARD SORTING - Optimal Sort - XSort (desktop app for Mac) NAVIGATION TESTING - Treejack - Five Second Test
  • 41. ORGANIZING THE DATA Organize the data into categories or findings. Find themes and put in table.
  • 45. AFFINITY DIAGRAMS Organizes items into common themes. Helpful when you have a large amount of data. You have many facts or ideas in apparent chaos. When issues seem too large and complex. When group consensus is needed.
  • 46. AFFINITY DIAGRAMS 1. Record each idea on sticky note and layout on wall 2. Look for groups 3. Repeat till all notes are grouped 4. If a note seems to belong in two groups, make a second note 5. Discuss patterns and reason for groupings 6. Find headers
  • 49. SPREADSHEETS Use to track stories, needs, pain points, successes Provides Quantitative layer over Qualitative information More difficult to collaborate than affinity diagrams Example
  • 50. WORKSHOP # 1 - USABILITY TEST Please break into twos. Person A tests Person B Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen Debriefing
  • 51. WORKSHOP # 1 - USABILITY TEST Anything surprise you? Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  • 52. WORKSHOP # 1a- USABILITY TEST Please break into twos. Person B tests Person A Follow format: Orientation Tasks - read aloud to participant - careful not to “help” - be sure to ask about expectations - let mistakes happen Debriefing
  • 53. WORKSHOP # 1a - USABILITY TEST Anything surprise you? Any new insight? Anything go wrong? Was the site used in a way that you did not expect? Did you discover any usability problems?
  • 54. DESIGNING FOR WEB USABILITY
  • 55. USER EXPERIENCE "User experience isn't a layer or component of a product or service. It's really about the design of the whole systems and their interconnections." - Andre Hinton, Senior IA at Vanguard
  • 56. WHY TEST? If a user can’t find what a product, they won’t buy. If they can’t find what they are looking for, they will look elsewhere. The holder of the mouse rules!
  • 58. NAVIGATION “Navigation isn’t just a feature of a website, it is the web site, in the same way that the building, the shelves, and the cash register are Sears. Without it, there’s no there there.” -Steve Krug
  • 59. WAYFINDING Coined by Kevin Lynch in The Image of the City, 1960. Describes the elements that allow us to navigate successfully in cities and towns.
  • 60. 4 CORE COMPONENTS 1. Orientation: Where am I now? 2. Route decisions: Can I find the way to where I want to go? 3. Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next? 4. Closure: Can I recognize that I have arrived in the right place?
  • 61. ELEMENTS OF MENTAL MAPS 1. Paths: streets, transit lines, canals, railroads - channels that people regularly move. 2. Edges: physical barriers; walls, fences, rivers, shore - boundaries that create linear breaks in continuity/separate and relate two distinct regions. 3. Districts: Major sections of a city that have a common identifying character: Chinatown, Wall Street, Greenwich Village.
  • 62. ELEMENTS OF MENTAL MAPS 4. Nodes: Intersections, enclosed squares, street corners, subway stations - all serve as points of reference, transition and destination. 5. Landmarks: Towering buildings, golden domes, mountains, signs, storefronts, trees - physical objects that serve as spatial reference points.
  • 63. ON THE WEB No sense of scale or movement in space. No compass: no direction. You are here: navigation interface. Paths: lead the way: site navigation, breadcrumbs.
  • 64. PATHS Consistent, predictable navigational links. Appear the same throughout the site. Can be habitual. Explicit elements: breadcrumbs.
  • 65. EDGES & DISTRICTS Effective interface design uses consistent page grid, terminology, navigation links. Uses visual flexibility to create identifiable regions and edges within the larger space.
  • 66. Landmarks along the way REGION REGION REGION REGION REGION REGION
  • 67. NODES The local coffee shop or Times Square? Too much choice causes stress, slows decisions, makes us less satisfied and more likely to walk away.
  • 69. LANDMARKS “YOU ARE HERE” Search function cuts across all the normal wayfinding boundaries. Orientation cues are particularly important since users often arrive at a page without having followed a deliberate and repeatable path.
  • 70. Headers: “You are here” markers
  • 71. SUMMARY 1. Paths: create consistent, well-marked navigation paths. 2. Regions: create a unique but related identity for each site region. 3. Nodes: don’t confuse the user with too many choices. 4. Landmarks: use consistent landmarks in site navigation and graphics to keep the user oriented. Web Style Guide, 3rd Edition
  • 73. ELEGANCE & SIMPLICITY Use economy of expression. Most powerful designs are result of a process of simplification and refinement.
  • 74. MINIMALISM “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” - Anoine de Saint Exupéry -
  • 76. ADVANTAGES Approachability: easy to tell at a glance what it is and designs invite further exploration. Recognizability: recognized easily, easily assimilated, understood and…REMEMBERED. Immediacy: have greater impact because they can be immediately recognized and understood with minimal effort. Usability: simplicity enhances usability.
  • 77. PRINCIPLES Unity Refinement Fitness All the elements must be unified to produce a coherent whole. The parts and whole must be refined to focus user attention and the fitness of the solution to the communication problem must be ensured at every level.
  • 78. HOW Reduction Regularization Leverage Reduce the design to its essence, regularize the elements of the design, then combine them for maximum leverage.
  • 79. INFORMATION... ... consists of differences that make a difference. - Edward Tufte, Envisioning Information
  • 80. SCALE, CONTRAST, PROPORTION The subtle interrelationship of scale, contrast and proportion can be seen in all harmonious designs.
  • 81. SCALE Describes the relative size of a design element in relation to the other design elements and the composition as a whole.
  • 84. CONTRAST Results from the differences that can be seen between the design elements. Provides visual distinctions in: shape, size, color, texture, position, orientation, and movement.
  • 87. PROPORTION Determines the balance and harmony of the relationship between the elements.
  • 90. ORGANIZATION & STRUCTURE Provide the user with visual pathways needed to experience a site in a systematic way. Must be introduced by establishing relationships among the design elements.
  • 92. PRINCIPLES Grouping Hierarchy Relationships Balance
  • 93. GROUPING Start by grouping display elements into higher order units. (Note: words in a book are grouped into columns, paragraphs, sections etc). Higher-level structures orient the user. Binds functional units tightly together. Use spacing and alignment for effectiveness.
  • 95. HIERARCHY Eye looks for visual hierarchies for orientation. Most important elements must be large enough to draw the viewer closer. Specifics follow.
  • 97. RELATIONSHIPS Grouping and hierarchy are reinforced when visual elements are related. Position, size and value provide visual cues. Alignment helps form visual relations.
  • 99. BALANCE Ensures that the elements remain stable in their position on the page. A composition is balanced when the visual weight of the elements on either side of the piece are approximately equal.
  • 101. WORKSHOP # 2 - PAGE LAYOUT Please break into three groups. Find websites that illustrate: 1. Scale 5. Grouping 2. Contrast 6. Hierarchy 3. Proportion 7. Relationships 4. Organization & Structure 8. Balance
  • 103. FIRST CHANCE can be your first (and possibly last) chance to attract a user
  • 105. IDENTITY include a tag line that summarizes what the company does
  • 108. FRONT PAGE should be like the front page of a newspaper
  • 110. TELL YOUR STORY should say who you are, what you do or what products your offer and what sets you apart from the competition
  • 115. PRIORITY emphasize highest priority tasks so there is a clear starting point
  • 117. SHOULD BE UNIQUE design to be clearly different from all other pages on the site
  • 122. ESTABLISH TRUST & CREDIBILITY
  • 126. THE FINE PRINT group all corporate information in one distinct area
  • 130. CALLS TO ACTION reveal site content with calls to action
  • 135. Link to home page Primary location for search, shopping carts LOGO Calender | A-Z Index Search This Site GO Navigation and search The tagline would go here... Identity and titles Header Navigation links Navigation | Navigation | Navigation | Navigation Tab navigation Selected Tab Unselected Tab Unselected Tab Navigation Home page > Section > Page Breadcrumb trail Alternate right location Navigation for scan column Navigation navigation and search Local Navigation Navigation Navigation Common location for Navigation banner ads Navigation Navigation Search, banner ads, Left scan column Right scan column Main content column contact (optional) (optional) information Contact information, Footer Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555 copyrights, dates
  • 136. WEB STANDARDS “The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable and quietly but unmistakably engaging.” - Jeffery Zeldman -
  • 137. ABOVE THE FOLD Above the fold - a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. In web design, top 600 to 700 pixels (on 19” - 22” monitor) Just a guideline.
  • 140. BREAKING THE RULES More sites now will put important content beneath the fold. People will scroll if the content is interesting. 37signals Acumen Fund Zipcare
  • 141. PURPOSE OF GRAPHIC DESIGN Unlike a print, web users interact with information. GUI (graphic user interface) must convey function and meaning. Graphics are integral to the user’s experience.
  • 142. PURPOSE OF GRAPHIC DESIGN Create visual hierarchy so you can see what’s important. Define functional regions of the page. Group page elements that are related, so you can see structure in the content.
  • 143. CONSISTENT LAYOUT Header - mini versions of the homepage. Footer - about house keeping and and legal matters. Global Navigation Local Navigation Content, Features, Products Banner Ads
  • 144. PAGES SHOULD INCLUDE Informative title Identity Copyright statement Link back to home Navigational links Heading or title to clarify content Link to contact information Alternate (alt) text identifying graphics on the page
  • 145. WHAT GOES INTO A HEADER? Site identity Major navigation links/utility navigation Search box (not always) Link back to home
  • 146. POSSIBLE HEADER COMPONENTS Individual designs rarely use them all. Advertising Search This Site GO Cart Navigation | Navigation | Navigation | Navigation LOGO Site titles, section identity, or advertising Selected Tab Unselected Tab Unselected Tab
  • 149. WHAT GOES INTO A FOOTER? Contact information. Copyright statement. Page author. Links to related sites or to larger enterprise. Utility links can go here. Redundant navigation for long pages.
  • 152. CONTENT IS KING “Ultimately, users visit your website for its content. Everything else is just the backdrop. The design is there to allow people access to the content.” - Jakob Nielsen -
  • 153. PAPER VERSUS MONITOR Because screen resolution is low (72 to 110 dpi), it places a strain on the human eye. Because we read on a screen, we are forced to view from a more or less fixed position - with print you can read anywhere in any position. Can lay papers out on the floor. (Can’t do a search though.)
  • 154. PAPER VERSUS MONITOR Screen glare is not an obstacle when reading on paper. Monitor Flick: looks like a solid image, but the screen is refreshing so fast that you are fooled into seeing a solid image, but the brain is alway correcting for the flicker. Reading is 25% slower on a screen. (Jacob Nielsen)
  • 155. READING ON THE WEB - Scrolling is clumsy - people don’t like it and they lose their place. - Readers scan on-screen, then print content for reading. - Web reading is not stationary - text jumps from link to link and page to page. - Many web pages end up as fragments of information taken from larger context.
  • 156. 3 GUIDELINES 1. Be succinct - write no more than 50% of the test that you would have used in print. 2. Write for scanability - use short paragraphs, subheadings, bulleted lists. 3. Use hypertext to split up long information into multiple pages.
  • 157. SCANABILITY - Studies show that almost 80% of users initially scan a webpage. - Users pick out key words, sentences and paragraphs of interest - They skip over the text they are not concerned with. - Write articles with two or three levels of headlines for easy scanability. - Use general page headings plus subheads and sub-subheads if needed.
  • 158. SCANABILITY - Use meaningful headlines - Tell the user what the page or section is about. - Use bulleted lists and similar design elements to break text blocks. - Use highlighting and emphasis to catch the user's eye. - Be sure to distinguish from link colors so as to avoid confusion.
  • 159. USE PLAIN LANGUAGE - Start each page with the conclusion - most important material should come up front. - Users should be able to tell in a glance what the page is about. - Users often only read the first line of a paragraph - use topic sentences, one idea per paragraph. - Use simple sentence structure - avoid convoluted writing and complex words. - Use caution with metaphors and humor - readers may take you literally.
  • 160. CHUNKING - Use hyperlinks to make text short. - Keep links visible, ideally above the fold. - Split the information into “chunks” that focus on a certain topic. - Move long, detailed info to secondary pages. - Avoid using links to break long articles into separate pages - is disruptive and makes printing difficult.
  • 161. HEADLINES - Online headlines are different than printed headlines. - Online headlines are often displayed out of context: as part of an article, in a search list, in a bookmark list. - Headline must stand on it’s own even when the rest of content is unavailable. - Online headlines and their content are often hard to see in a single glance on the window so it is difficult for the user to learn enough just from the surrounding data.
  • 162. LEGIBILITY Use colors that have a high contrast between the text and the background. Use plain color-backgrounds or subtle patterns. Use fonts big enough that people can read. Make the text stand still – moving blinking or zooming text is hard to read. Keep sentences to 7 - 10 words as that is what the eye can comfortably track.
  • 163. LEGIBILITY Try to left justify text when possible.
  • 164. LEGIBILITY AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS 10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE UNIFORM AND BLOCKY APPEARANCE. DON'T DO IT. Legibility depends on the tops of all the letters. Legibility depends on the tops of all the letters. 2. Use plain color-backgrounds or subtle patterns. 3. Use fonts big enough that people can read. 4. Make the text stand still – moving blinking or zooming text is hard to read.
  • 165. REMEMBER Explain what the article is about in terms that relate to the user. Write in plain language. Avoid teasers that try to entice people to click. Try to make the first word an important, information-carrying one.
  • 166. WORKSHOP # 3 HEADLINES Stay in your groups. Remove every word you can from the passages below and create a catching headline. 1. Government officials involved in the Olympics call it a fiasco, that is, the extent of chaos that has thrown security plans into disarray upon learning that of the shortfall of civilian guards. 2. If “Ghosts in the Machine” an ambitious exhibition at the Met were itself a machine, it would have lots of moving parts but not all would be performing with equal efficiency. 3. Apple announced that its’ bestselling MacBook laptop just got its newest makeover. It’s a thing of beauty, clad in aluminum like its more expensive Pro siblings. A
  • 168. TYPOGRAPHY Typography is the process of arranging letters, many terms are left over from the days of letterpress On computers we use fonts, whether for digital printing or on the web.
  • 169. HISTORY OF WEB TYPOGRAPHY At first browsers had no way of embedding fonts. 1995: Netscape introduces <font> tag 1998: CSS2 allows for more type configuration 2005: CSS3 introduces @font-face, allowing fonts to be hosted online
  • 170. WEB-SAFE FONTS Come preinstalled on most computers. Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma Times New Roman, Verdana
  • 171. @FONT-FACE Lets the browser load a font from a remote server, meaning that pages can display text in the specified font even if the user does not have it installed on their computer. Allows for greater design customization without sacrificing accessibility or SEO.
  • 172. IMAGE REPLACEMENT Good for logos. Bad for accessibility and SEO.
  • 174. SERIF VS SANS SERIF Serif Sans Serif Slab Serif Display
  • 175. HEADERS VS COPY You can use decorative fonts for headers... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien ut porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla at felis eget neque aliquam convallis.
  • 176. X-HEIGHT Lorem ipsum Lorem ipsum Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla at felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
  • 177. OUR FAVORITES Our favorite web fonts available for free from Google Fonts. Open Sans Open Sans Open Sans Open Sans Open Sans Lato Lato Lato Lato Lora Lora Lora Lora Vollkorn Vollkorn Vollkorn Vollkorn
  • 179. INCREASE LEADING Line height should be at least 120% of font size. Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla eleifend est nulla eu orci. Mauris lectus eros, at felis eget neque aliquam convallis. rutrum at lobortis ut, eleifend eget eros. Nulla at felis eget neque aliquam convallis.
  • 180. DO
  • 184. MAINTAIN LEGIBILITY Light colors are hard to read, even on white. Beware of #666. Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla at felis eget neque aliquam convallis. at felis eget neque aliquam convallis. Test your legibility with AccessColor.
  • 185. DO
  • 189. COLUMN WIDTH The eye can only comfortable track 7-10 words per line, which is about 40 to 80 characters. Multiply your text size by 30 to determine maximum column width. 10px type x 30 = 300px column width
  • 190. DO
  • 194. IMPLEMENT HIERARCHY Use multiple typefaces to differentiate between elements on the page. Mix between categories (serif, sans serif, slab serif, display) Don’t go too crazy! Don’t use more than 2 or 3 fonts.
  • 195. DO
  • 199. RESOURCES FOR WEB FONTS GOOGLE WEB FONTS FONTSQUIRREL TYPEKIT
  • 200. WORKSHOP # 4 CREATE SITE Please go into the group you worked with when creating personas. CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND SCENARIOS. What content would the user you defined find on the site? Establish content Establish information architecture Create site map Create navigation Create wireframes or other prototype Do a prototype test Make improvements
  • 201. WORKSHOP #4 SCENARIOS GROUP #1: Site is to provide info for people starting own business; some of them have experience in he business world; others this is their first exposure to issues running a business. GROUP #2: Site is to provide info for people looking to place parents in assisted living. GROUP #3: Site is to provide info for people looking to compare car insurance.

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. The above example is from a website&apos;s &quot;About Us&quot; pages. The heatmap clearly shows users&apos; tendency to read in an &quot;F&quot; pattern, and their focus on information that&apos;s presented in bulleted lists. In this case, there&apos;s also a small amount of attention to the &quot;see also&quot; area, but no viewing of the promotions in the rightmost column. \n
  14. \n
  15. \n
  16. Web users tend to ignore everything that looks like advertisement and, what is interesting, they&amp;#x2019;re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.\nJakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they&amp;#x2019;re looking for a snippet of information on a page or are engrossed in content, they won&amp;#x2019;t be distracted by the ads on the side.The implication of this is not only that users will avoid ads but that they&amp;#x2019;ll avoid anything that looks like an ad, even if it&amp;#x2019;s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.\n\n
  17. On Web pages, we tend to focus on people&amp;#x2019;s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people&amp;#x2019;s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.\n\n
  18. Here&amp;#x2019;s an eye-tracking study that demonstrates this. We&amp;#x2019;re instinctively drawn to faces, but if that face is looking somewhere other than at us, we&amp;#x2019;ll also look in that direction. Take advantage of this phenomenon by drawing your users&amp;#x2019; attention to the most important parts of your page or ad. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.\n\n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. Examples\nGood IA: Supermarket puts chocolate together with other snack foods\nBad IA: nAll grocery items by manufacturer \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. you can see parallels. similarities but travel on the web is magical. you just appear at the next point in your journey from page to page. no experience of the landscape unfolding before you as a series of landmarks.\n
  64. \n
  65. Consistency is the golden rul of interface design and way finding, but paradox is if everything looks the dame, THERE ARE NO EDGES. in a corporate site if y ou move from one region to another, from marketing to HR, you ought to notice that you just passed an important regional bouncary.\n
  66. \n
  67. The Paradox of Choice, Barry Schwartz give users choice is the matra but too many will overwhelm them.\n
  68. As pages get more complex you risk overwhelming the user with the &amp;#x201C;times Square effect&amp;#x201D; of too many competing visual stimuli.\n
  69. Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  70. \n
  71. Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. \n
  136. \n
  137. \n
  138. \n
  139. \n
  140. \n
  141. Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  142. Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  143. Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
  144. \n
  145. \n
  146. \n
  147. \n
  148. \n
  149. \n
  150. \n
  151. \n
  152. \n
  153. \n
  154. \n
  155. \n
  156. \n
  157. \n
  158. \n
  159. \n
  160. \n
  161. \n
  162. \n
  163. \n
  164. \n
  165. \n
  166. \n
  167. \n
  168. \n
  169. \n
  170. \n
  171. \n
  172. \n
  173. \n
  174. \n
  175. \n
  176. \n
  177. \n
  178. \n
  179. \n
  180. \n
  181. \n
  182. \n
  183. \n
  184. \n
  185. \n
  186. \n
  187. \n
  188. \n
  189. \n
  190. \n
  191. \n
  192. \n
  193. \n
  194. \n
  195. \n
  196. \n
  197. \n
  198. \n
  199. \n
  200. \n
  201. \n