wet-boew / wet-boew-styleguide

A style guide for the Web Experience Toolkit.
http://wet-boew.github.io/wet-boew-styleguide/index-en.html
36 stars 32 forks source link

Heuristic evaluation - Twitter embedded timeline #14

Open rubinahaddad opened 10 years ago

rubinahaddad commented 10 years ago

Please perform a heuristic review of the following component: Twitter embedded timeline example.

Performing a heuristic evaluation

  1. Post a comment on this issue indicating that you will perform a heuristic evaluation of the component. If you see that at least three people have already indicated that they are performing a heuristic evaluation, consider reviewing another component.
  2. Use the heuristic template to guide your evaluation.
  3. Make sure that you review all responsive states of the component.
  4. Once you have completed your evaluation, post the results as a comment on this issue as follows:
    • For each heuristic, display the heading containing the letter of the section, and the number of the heuristic. Below each heading, provide the results of your evaluation of that heuristic. (e.g., B. Provide status feedback 1. Your result).
    • Make sure you specify which responsive state each result applies to. If a result applies to all responsive states, specify that it applies to all responsive states.
Lissansky commented 10 years ago

A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet): Laptop: ASUS Windows 8, Chrome 32.0.1700.72 , Firefox 26. iPhone iOS7, Safari (latest). Nexus 7, Android 4.2.1 on Chrome 31.0.1650.59 and Firefox 26.0.1

B. Provide status feedback

  1. Does the component always let users know about its current status? YES
  2. Does the component give immediate, easy to understand feedback? YES
  3. Will the user have enough visual cues to easily complete the component’s tasks? iphone/tablet NO: can't see the outer scroll bar, so I unintentionally scrolled within the Twitter box when I actually wanted to scroll down the page. The experience on the tablet using Chrome was best because the inner and outer scroll bars had some white space between them, so it was easier to select the outer one when you wanted to. Laptop YES: on laptop, the inner and outer scroll bars are clearly visible and easy to click, so no issue.
  4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view? Laptop: YES iphone/tablet: No - see no. 3 above

C. Match real world conventions YES

  1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable? Laptop: YES iphone/tablet: scroll bars are very narrow and difficult to notice at first glance, in fact, you can't even tell there are scroll bars within the widget until you touch it.
  2. When users perform actions within the component, are the results they get what they would commonly expect? YES

D. Apply standards and ensure consistency

  1. Have industry formatting standards been used consistently throughout? YES
  2. Is there a logical and consistent usage of elements throughout the component? YES
  3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component? YES
  4. Is the experience consistent across screen sizes? No: Experience is better on Laptop because: see No. 3 in section B above.

E. Help users recognize, prevent and recover from errors Laptop: YES iPhone/tablet: NO once I started scrolling within the twitter box (unintentionally), it's difficult to determine how to get out of that and go back to scrolling only the page.

  1. Does the component help to prevent users from making errors whenever possible? laptop: no errors encountered iphone/tablet: recommendation: if the scroll bar within the Twitter box was slightly farther away from the page scroll bar and if they were both slightly bigger, this would help prevent thumb scrolling errors.
  2. When there is an error, is it simple and informative? N/A
  3. Does it provide information to fix or correct the error? N/A see #1 above

F. Design for human interaction Laptop: yes iphone/tablet: larger thumbs would have a hard time with the scroll bars, see #3 in first section above.

  1. When using the component:

a. Is the layout intuitive? YES

b. Are the interactions intuitive? YES

  1. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons? YES on Laptop I tested tabbing through all the links and using both the page scroll bar and the Twitter box scroll bar using the tab/arrows only, it worked well and I was able to tell which scroll bar was activated.
  2. If the task can't be completed in one session, does the user have an option to save and return to it at a later time? N/A

G. Keep it simple

  1. Does the component display only the information needed by the user at any given point in time? YES
  2. Overall, are user interactions kept as simple as possible? YES
  3. Does the component use plain language? YES
pcwsmith commented 10 years ago

A. Devices, browsers, etc.

IPad, 4th gen., iOS 6.1.3: Safari, Chrome v. 31. Screen resolution 2048 x 1536 px. Reviewed in both landscape and portrait orientation.

Blackberry Curve 9360, OS 7.1, default browser. Screen resolution 480 x 360 px. Landscape orientation only.

B. Provide status feedback

  1. Always let users know about its current status? Yes. When new tweets are available, a notification appears.
  2. Give immediate, easy to understand feedback? Yes
  3. Adequate visual cues to easily complete the component's tasks? Could be improved. The example timeline pulls in tweets related to a hashtag, but that wasn't immediately clear to me. Only after playing around with it for a bit did I understand that the #WxT hashtag in the upper left corner was meant to show this. Also the link to Twitter in the upper right surprised me - when I clicked it I was expecting to go to a particular account rather than the main Twitter.com page. At the bottom, there is a text input field for adding a tweet ("tweet #WxT") that is actually a link - when I tapped in it, I was not expecting to be taken to another browser tab to be able to send a tweet.
  4. When hidden, something that allows it to be brought in or out of view? Can scroll through the timeline to get to more tweets. On BB, a scroll bar appears in the component to make this obvious. No scrollbar on iPad, perhaps could use one? Scrolling the web page vs scrolling within the component sometimes not as clean as could be - on iPad, sometimes need to tap, release, then scroll to activate scrolling within the component.

C. Match real world conventions

  1. Meets common expectations and is easily recognizable? Yes
  2. Results of user actions are what would be commonly expected? See B.3 re text input field for adding a tweet. Also, when interacting with tweets in the embedded timeline, the icons for replying, retweeting and making a favourite also link the user to a new browser tab rather than working inline - unexpected behaviour.

D. Apply standards and ensure consistency

  1. Industry formatting standards used? Yes - looks like Twitter.
  2. Elements used: logical and consistent? Yes
  3. Use of language: consistent, clearly understandable, relevant, concise, current and to the point? Dependent on content - if tweets are not clear, then usability will suffer.
  4. Consistency across screen sizes? Yes

E. Help users recognize, prevent and recover from errors

  1. Help to prevent user error? Unexpected behaviour of several elements of this component (see B.3 and C.2) might lead to user error.
  2. Error message simple and informative? N/A
  3. Information to fix or correct errors? N/A

F. design for human interaction

  1. When using the component: a. Is the layout intuitive? Yes b.are the interactions intuitive? See B.3, B.4 and C.2
  2. Is the layout designed to accommodate various input methods and screen sizes? Yes
  3. Option to return to task in later session? N/A

G. Keep it simple

  1. Only display the information needed at any given point? Yes
  2. Overall, are user interactions kept as simple as possible? See B.3 and C.2
  3. Does the component use plain language? Yes, but this is somewhat dependent on content of the tweets that appear.
ballantr commented 10 years ago

A. Please indicate which devices, browsers, and operating systems were tested (Desktop/Mobile/Tablet):

Device OS Browsers
Laptop (24 inch Monitor) Windows 8.1 IE 11.0.3
Laptop (24 inch Monitor) Windows 8.1 FF 27.0.1
Laptop (24 inch Monitor) Windows 8.1 Chrome 33.0.1750.146 m

B. Provide status feedback

1. Does the component always let users know about its current status?

If you know how it all works, yes. My issue is not with the implementation, but with the original design.

2. Does the component give immediate, easy to understand feedback?

Yes

3. Will the user have enough visual cues to easily complete the component’s tasks?

Yes

4. If some part of a component is hidden, can users see something that allows them to bring it in and out of view?

Yes

C. Match real world conventions

1. Do parts of the component match what you see, hear (if any) and touch (if any) meet common expectations and are they easily recognizable?

The twitter "filer" (top left) is not intuitive as to its purpose. Expand/Collapse behaviour is a bit unusual, but not really a problem. Launching a new page to send a new tweet is unexpected.

2. When users perform actions within the component, are the results they get what they would commonly expect?

Yes

D. Apply standards and ensure consistency

1. Have industry formatting standards been used consistently throughout?

Not exactly. The Embedded Timeline on the Twitter site has “Tweet to …” at the bottom, where we have “Tweet …” I think “Tweet to …” is clearer.

2. Is there a logical and consistent usage of elements throughout the component?

Yes

3. Is there a consistent usage of language that is clearly understandable, relevant, concise, current and to the point throughout the component?

N/A

4. Is the experience consistent across screen sizes?

Mostly. The scroll bar doesn’t scale correctly on some browsers.

E. Help users recognize, prevent and recover from errors

1. Does the component help to prevent users from making errors whenever possible?

N/A

2. When there is an error, is the messaging simple and informative?

N/A

3. Does it provide information to fix or correct the error?

N/A

F. Design for human interaction

1. When using the component:

a. Is the layout intuitive?

I have issues with the original design, but the embedding seems fine.

b. Are the interactions intuitive?

I have issues with the original design, but the embedding seems fine.

2. Is the layout designed so that various input methods (touch, keyboard, mouse, gesture) and screen sizes can easily interact with things like input fields, sliders and buttons?

Yes

3. If the task can't be completed in one session, does the user have an option to save and return to it at a later time?

N/A

G. Keep it simple

1. Does the component display only the information needed by the user at any given point in time?

Yes

2. Overall, are user interactions kept as simple as possible?

Yes

3. Does the component use plain language?

Yes

ballantr commented 10 years ago

Summary: Twitter Embedded Timeline

http://wet-boew.github.io/v4.0-ci/demos/twitter/twitter-en.html April 15, 2014

A. Devices and Browsers Used

Device OS Browsers
Laptop: ASUS Windows 8 Chrome 32.0.1700.72
Laptop: ASUS Windows 8 Firefox 26.
iPhone iOS7 Safari (latest)
IPad, 4th gen iOS 6.1.3: Safari,
IPad, 4th gen iOS 6.1.3: Chrome v. 31. Screen resolution 2048 x 1536 px. Reviewed in both landscape and portrait orientation.
Blackberry Curve 9360 OS 7.1, Default browser. Screen resolution 480 x 360 px. Landscape orientation only.
Nexus 7 Android 4.2.1 Chrome 31.0.1650.59
Nexus 7 Android 4.2.1 Firefox 26.0.1
Laptop (24 inch Monitor) Windows 8.1 IE 11.0.3
Laptop (24 inch Monitor) Windows 8.1 FF 27.0.1
Laptop (24 inch Monitor) Windows 8.1 Chrome 33.0.1750.146 m

B. Overview

The embedded Timeline seems like an effective embedding of the Twitter Timeline widget – warts and all. Most of the issues reviewers raised were all with the original code. That does not make them less important, however. Nevertheless, it makes no sense for us to reinvent Twitter’s wheel. To do so would only confuse Twitter users

The issues and suggestions below focus on small tweaks that we can make using the API, that do not significantly interfere with the Twitter interaction style.

C. Issues

Links

Scrolling Challenges

Filtering

New Page or Tab