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

User experience design proposal for Firefox Preview on Android (Fenix) #109

Closed jovana-caetano closed 4 months ago

jovana-caetano commented 4 years ago

Name the three biggest issues

  1. The ‘Search’ is not focused;
  2. The ‘Tab’ icon doesn’t have the function;
  3. The lack of 'Refresh' visible to the user.

Explain why it’s an issue

  1. Being a browser, it is important that its main function is successfully delivered to the user, so I believe it is important to highlight the search function so that there is no hesitation on the user when entering the App.

  2. When the user goes back to the main page, he returns via the buttons on his cell phone, instead of clicking on the “Tab” icon that would be much easier, with direct micro interaction with the app, fast and accessible to the finger; When clicking on the “Tab” icon, a drop-down screen with the last tabs open should be opened. And add a "Home" icon to direct you to the home page.

  3. Where I live, Brazil, a study by Akamai, in the ranking of 241 countries surveyed, Brazil was ranked 85th in terms of quality of access speed - on average 6.4 Megabits per second and below the average worldwide traffic , 7Mbps. This quality also decreases according to the region and locality, in neighborhoods, non-central cities, generating even more inequality and lack of access to everything that the internet provides. Many having access to the internet only via mobile data, which operators are obliged to deliver only 80% of what is expected. With this, the need for "Refresh" on the pages is necessary, both visually, as it is possible to use through the screen, because it is common when we access some content the page does not load completely, or even, nor does it load, being necessary to update, so that the page adapts to the speed of the internet.

Source: https://axes.com.br/blog/qualidade-da-internet-no-brasil/

Show us how you would improve it

Through a usability test applied to two users of different generations, race and gender, I obtained the following data for me to do the design interactions in the App. It was asked for each one of them, first: use the competitor's browser to perform the task and after performing the same task using Firefox Preview.

Usability test performed with two users:

USER 1: 13-year-old white boy, with natural ease of using a smartphone, using social networks, games, browser searches in a fluid way, with knowledge of other browsers, has already used Firefox on the computer;

USER 2: 53-year-old black woman, with common use of the cell phone, using only Facebook and WhatsApp for communication, and uses the standard cell phone browser to search for recipes and knitting, a very common use of the smartphone.

Usability test Firefox Preview App A "simple" test to test the main function of browsers: do a search.

What were users asked to do? 1st: enter the browser 2nd: do an in-app search 3rd: enter the 1st link listed 4th: back 5th: enter the 2nd link listed 6th: and after returning to the app's home page.

USER 1: App 1: research performed easily and smoothly, user familiar with the app. Time to complete the task: 41 seconds

Firefox Preview: the user opened the app and paused to try to understand the app and where he should click to do the Search. After clicking on the first link and trying to return the user got confused using the cell phone buttons to return resulting in him leaving the app twice in a row. When entering the App again, the user performed the search again, as in the image below (Image), instead of clicking on the link available in the “Tabs” function. The user also did not identify the “Tabs” icon as a shortcut to the main page.

Screenshot_20200405-145547 "The same survey performed twice"

Time to complete the task: 1 minute and 50 seconds

USER 2: App 1: calm user to use the app, carried out the task without great difficulties, used the app with a lot of familiarity. Time to complete the task: 57 seconds

Firefox Preview: the user when opening the app also had a break time and search for where to click to do the Search. There was no great difficulty to do the task, only the confusion and unfamiliarity with the app's interface. And in the last step of the test that would be “Back to the home page”, the user also came back through the cell phone buttons and not through the “Tabs” shortcut. Time to perform the task: 1 minute and 06 seconds

After analyzing user interactions with the Firefox App and hearing about their difficulties using the app, I suggest the following design interactions for the 3 problems I mentioned above.

1. Leave the Search bar highlighted so that the user does not hesitate when opening the app, reducing the user's search time. Também disponibilizando a opção

IMG_20200406_130905620

2. Add the following icons (in addition to the 'Tabs' that already existed but cause confusion when clicking on it and pointing to the home page and not to a session with the tabs open) next to the URL bar: 1. Home - direct shortcut to the home page of the app; 2: Tabs - clicking on the icon opens a screen with the latest searches, facilitating the page change; 3: Collections - so that the 'Collections' function is visible to the user.

9PAPsNA3

3. Add the Refresh function, both visually, in this case, located next to the URL, as it is possible to update the page through Swipe-To-Refresh.

TJOhFIPP

How would you measure your designs effectiveness?

An effective and empathic project, based on the principles of inclusive design and accessibility for all, taking into account not only accessibility for people with disabilities and limitations, but also being accessible to every possible user who will access it, considering the contexts, social and economic experiences, cultural and race, which influence the way each person interacts with the product. And always trying to make the use as easy as possible and make it more intuitive for everyone, I developed these projects.

digitalforus commented 4 years ago

Wow! I really like the way you analyze the problem and prover solution.

I would be very grateful if you can be a mentor on UI/UX Design sir