Difference between revisions of "Testing layout submissions"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with '== Key Usability == ; Contrast : Can you read the words easily? Are the colours outside this recommendation? That's worth mentioning. ; Text sizing : Can you read the words? If…')
 
m (adding browser support policy link)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
== Key Usability ==
 
== Key Usability ==
  
; Contrast
+
=== Contrast ===
: Can you read the words easily? Are the colours outside this recommendation? That's worth mentioning.
+
; Text sizing
+
: Can you read the words? If the font is too small, can you size it up without words breaking out of their bounds or overlapping?
+
; Layout fail
+
: Is content overlapping? Are there blank areas that hold content in other browsers? Are there horizontal scrollbars?
+
; Links
+
: Can you click on the links? Can you tell what text are links? Can you tell what links you have visited?
+
  
== Checklist ==
+
Can you read the words easily? Are the colors outside this recommendation? That's worth mentioning.
  
=== Journal, Post, Read & Network View Regions ===
+
=== Text sizing ===
  
Check the five regions in order, asking the key usability questions about each area.
+
Can you read the words? If the font is too small, can you size it up without words breaking out of their bounds or overlapping?
  
==== Header ====
+
=== Layout ===
 +
 
 +
Is content overlapping? Are there blank areas that hold content in other browsers? Are there horizontal scrollbars?
 +
 
 +
=== Links ===
 +
 
 +
Can you click on the links? Can you tell what text are links? Can you tell what links you have visited?
 +
 
 +
== Checklist: Journal, Post, Read & Network View Regions ==
 +
 
 +
Check the five regions in order, asking the key usability questions about each area. This plan is a guide to help you, not a requirement. You don't need to test every part of the checklist every time. Just do what you fancy.
 +
 
 +
=== Header ===
  
 
* Banner
 
* Banner
Line 22: Line 27:
 
* Subtitle
 
* Subtitle
  
==== Main Navigation ====
+
=== Main Navigation ===
  
 
Links to all views:
 
Links to all views:
Line 34: Line 39:
 
* Tags (user.dreamwidth.org/tag)
 
* Tags (user.dreamwidth.org/tag)
  
==== Sidebars ====
+
=== Sidebars ===
  
 
Try the layout with one sidebar, two sidebars, and no sidebars. In each configuration, does content overlap? Do you get horizontal scrollbars? Can you click on the links?
 
Try the layout with one sidebar, two sidebars, and no sidebars. In each configuration, does content overlap? Do you get horizontal scrollbars? Can you click on the links?
Line 46: Line 51:
 
* calendar table
 
* calendar table
  
==== Main Content ====
+
=== Main Content ===
  
 
* subject
 
* subject
Line 67: Line 72:
 
Can you post a comment? Turn on custom comment pages. In post view, can you read the comments easily? Can you understand who is making each comment, and where it fits in the thread? If there are lots of nested comments, does the layout break?
 
Can you post a comment? Turn on custom comment pages. In post view, can you read the comments easily? Can you understand who is making each comment, and where it fits in the thread? If there are lots of nested comments, does the layout break?
  
==== Footer ====
+
=== Footer ===
  
 
Normally there are some skip links here. There might also be some journal credits or journal actions, like a search or an RSS subscription button.
 
Normally there are some skip links here. There might also be some journal credits or journal actions, like a search or an RSS subscription button.
  
==== Archive View Regions ====
+
=== Archive View Regions ===
  
 
tba
 
tba
  
==== Subjects View Regions ====
+
=== Subjects View Regions ===
  
 
tba
 
tba
  
==== Tags View Regions ====
+
=== Tags View Regions ===
  
tba
+
Can you view all the tags and do they look nice?  Can you check to see whether they look good in the different display options, whether list, hiearchical, or cloud?
 +
 
 +
== Reporting Your Findings ==
 +
 
 +
At the start of every comment, post, or email you write, include the user agent you tested with, so coders can identify browser specific problems. You can find this at [http://whatsmyuseragent.com whatsmyuseragent.com]. You don't need to include your IP address.
 +
 
 +
Include any problems you happen upon, even ones not on the checklist. The designer might not solve your problem or change their design, but it's always useful to gain user experience.
 +
 
 +
If you have multiple browsers, see [[Browser Support Policy]] for a listing of the ones that should be tested.
 +
 
 +
[[Category: Styles]]

Latest revision as of 06:01, 30 March 2013

Key Usability

Contrast

Can you read the words easily? Are the colors outside this recommendation? That's worth mentioning.

Text sizing

Can you read the words? If the font is too small, can you size it up without words breaking out of their bounds or overlapping?

Layout

Is content overlapping? Are there blank areas that hold content in other browsers? Are there horizontal scrollbars?

Links

Can you click on the links? Can you tell what text are links? Can you tell what links you have visited?

Checklist: Journal, Post, Read & Network View Regions

Check the five regions in order, asking the key usability questions about each area. This plan is a guide to help you, not a requirement. You don't need to test every part of the checklist every time. Just do what you fancy.

Header

  • Banner
  • Title
  • Subtitle

Main Navigation

Links to all views:

  • Journal (user.dreamwidth.org)
  • Single Post (user.dreamwidth.org/1234.html)
  • Reading List (user.dreamwidth.org/read)
  • Network (user.dreamwidth.org/network)
  • Archive (user.dreamwidth.org/archive)
  • Subjects (user.dreamwidth.org/2009/01)
  • Tags (user.dreamwidth.org/tag)

Sidebars

Try the layout with one sidebar, two sidebars, and no sidebars. In each configuration, does content overlap? Do you get horizontal scrollbars? Can you click on the links?

(Probable content to look at:)

  • title
  • module
  • links list
  • page summary
  • calendar table

Main Content

  • subject
  • date
  • userpic
  • post contents
  • meta data:
    • mood
    • music
    • other
  • actions:
    • memory entry
    • share entry
    • track entry
    • permalink
    • read # comments
    • post comment
  • spacers

Can you post a comment? Turn on custom comment pages. In post view, can you read the comments easily? Can you understand who is making each comment, and where it fits in the thread? If there are lots of nested comments, does the layout break?

Footer

Normally there are some skip links here. There might also be some journal credits or journal actions, like a search or an RSS subscription button.

Archive View Regions

tba

Subjects View Regions

tba

Tags View Regions

Can you view all the tags and do they look nice? Can you check to see whether they look good in the different display options, whether list, hiearchical, or cloud?

Reporting Your Findings

At the start of every comment, post, or email you write, include the user agent you tested with, so coders can identify browser specific problems. You can find this at whatsmyuseragent.com. You don't need to include your IP address.

Include any problems you happen upon, even ones not on the checklist. The designer might not solve your problem or change their design, but it's always useful to gain user experience.

If you have multiple browsers, see Browser Support Policy for a listing of the ones that should be tested.