mozilla-mobile / outreachy-UX-2020

INACTIVE - http://mzl.la/ghe-archive - A place to document UX contributions for the summer 2020 Outreachy program.
8 stars 7 forks source link

Review Firefox Preview-Riya #10

Open riyasoganii opened 4 years ago

riyasoganii commented 4 years ago

Name the three biggest issues

  1. Confusing 'Tabs' and 'Collections' sections
  2. Unintuitive location of search bar
  3. Lack of uniformity in home page

Explain why it’s an issue

  1. The mechanism for opening a new tab is not easily understandable, as the location of the button is not very evident- hence the process is not intuitive. The difference between 'Open Tabs' and 'Collections' is also slightly difficult to comprehend when using the app initially. Additionally, when there are many tabs open, one has to scroll down all the way to the bottom in order to access collections.

  2. On most search engines/websites, the search bar is almost always located at the top. Hence, it is the users instinct to look towards the top when needing to search something.

  3. I felt that the home screen was lacking overall uniformity and symmetry for a number of reasons. This could reduce the overall appeal of the UI. The Firefox preview logo in the homescreen occupies too much space, resulting in a lot of empty area at the top. It makes other parts of the homescreen look disproportionate, especially the small private browsing button. The 'Collections' subsection lacks a menu button(3 vertical dots) whereas 'Open Tabs' has one. There is no 'x' button on each collection, while each tab has one. There is no 'share' button with each tab. whereas each collection has one.

Show us how you would improve it

1.There should be a '+' next to the header of 'Open Tabs' rather than in the search bar at the bottom, and 'Open Tabs' could thus be renamed to 'Tabs'. There could also be a '+' next to the header of 'Collections' so as to remove the 'Save to collection' button under 'Tabs' which causes confusion. In order to clarify and consistently remember the difference between tabs and collections, a logo next to their respective headers could be introduced. There could also be a drop-down button next to both 'Tabs' and 'Collections' headers, which would expand them to show the open tabs/collections respectively. When both of these menus are expanded, they could both each occupy half the screen and have individual scrolling mechanisms, in order to prevent the indefinite scrolling issue.

2.The usability would be more organic if the search bar was located at the top.

  1. The logo and private browsing button could be relocated and re-sized, and all the above mentioned non-uniformities could be fixed.

image Tabs

image Tabs (1)

image Tabs (2)

image Tabs (3)

image Tabs (4)

How would you measure your designs effectiveness?

User evaluation is the way to go! We could introduce a one-time pop up for each user with an optional survey to figure out what works for us and what doesn't. In this survey we could present them with statements to which they would respond intuitively from 'Strongly Agree' to 'Strongly Disagree'. The statements would be simple and straightforward so as encourage the completion of the survey. Some examples could be 'I think I would like to use this app frequently', 'I thought the app was easy to use', 'The user interface was appealing', etc.

topotropic commented 4 years ago

Thanks for your easy to understand design proposal!

I have two follow up question:

'Open Tabs' could thus be renamed to 'Tabs'. There could also be a '+' next to the header of 'Collections' so as to remove the 'Save to collection' button under 'Tabs' which causes confusion.

riyasoganii commented 4 years ago

@topotropic I thought the change from 'open tabs' to 'Tabs' would: a) give uniformity to the headings, as collections is not referred to as 'open collections' b) there is no feature that involves any form of 'hibernating/closed/hidden tabs'. Hence I believed it wasn't necessary to specify the fact that the tabs are 'open', as there is no alternative option. c) My design incorporates a '+' button next to the tabs header. Thus the heading 'Open tabs' might be misdirecting, as the conveyance of the option of opening a new 'Open tab' as isn't as easily understandable as opening a new 'Tab' is. Confusion regarding save to collection button: When users are introduced to the app, there is no information which clearly conveys the use of the collections feature. The users are thus left to figure out the feature by guiding themselves around it. This process would be made easier and more self explanatory if the user could add a collection directly from the collections heading, rather than it being accessible through tabs, as a) This might confuse new users into thinking that the 'tabs' collection and the 'collections' subheading may be two separate features. b) A new user may also be under the impression that 'Save to collection' automatically saves ALL open tabs to a collection (Although this is not the case) and may thus be hesitant towards implementing it at the risk of loss/disarrangement of their open tabs.