From MozillaWiki
Jump to: navigation, search

Concept Development- Tablet

Group Members:

Jacque Thompson, Benjamin Amoah, Stanley Anku, Isaac Dorgbefu, Samuel Kwadwo Obeng

Project overview

Issues identified
Tablets users are unable to browse more than 1 page at a time. Tablets users are unable to use search engine directly in browser. Tablets users are unable to search for particular text on a page. Tablets users are unable to save text as note/contact directly from browser. Tablet browsers have no spellchecker. General navigation on browser is cumbersome (e.g. back/next/home, etc.)

Systems/Solutions/Applications/Devices inability to address issues mentioned above
These problems existed in the past because not a lot of people had tablets or touchscreen phones and so not much attention was put on perfecting the browsing experience on tablets. Another reason is that tablet browsers were designed using the concept of browsing on a PC instead of developing a newer concept for tablets. Thus, the way things were done on the PC was brought directly to tablet browsing, which in a way are different from PCs. Now that the number of tablet users is increasing rapidly, the problems continue to exist because browser manufacturers have stuck with their previous designs since those designs seem to be working fine.

Findings from background research
From our research, we realized people complained about not being able to do some advanced functions that were possible on their PC browsers such as spellchecking and being able to search for particular text on a page. Furthermore, people wanted to swipe more and use other gestures while browsing.

Brief description of the essence of project/solution?
The aim of our project is to come out with a browser design for tablets that encompasses some aspects of the necessary features of PC browsers while making navigation easier and fun on the tablet by use of gestures. Thus, browsing on tablets should be fun, meaningful, efficient and effective.


Persona - Adam 

Adam is 20 years old and is studying for a Bachelor of Science degree in Management Information Studies, at a liberal arts college in Accra. He loves technology, his favourites, being tablets and the internet. Because of this love, he convinced his parents to buy him an iPad on his nineteenth birthday although it cost quite a lot. Since then, he has his iPad with him, wherever he goes. He browses the internet on the device while he moves about from one section of the school to another and while he sits at the cafeteria awaiting his orders. Even when, he and his friends hang out on the streets of his neighbourhood, he doesn’t forget to have the device on him. The iPad is the last thing he sees before sleeping as he uses it on his bed as well. Not a day goes by without him using his iPad.
Before getting the iPad, Adam browsed the internet with his laptop a lot. There were so many things he could do with his browser. He was able to browse many webpages at a time and use the Bing search bar incorporated into his browser to search Bing’s database, without loading the Bing website initially. Whenever he opened a new tab, he was able to select a site from a list of the most sites he had visited. This saved him some time since he did not have to remember every time the site he wanted to go to. Navigation on his laptop’s browser was also easy to use and effective. There were icons for Home, Previous, Next, History, Bookmarks. He loved to read and research on issues a lot and so most of the pages, he visited were quite long. This wasn’t a problem for him though, because his laptop browser allowed him to search for a particular word on a page and take him to the word’s location on the page. He could use the scrollbar as well to move to the top, middle and bottom of a page with ease. If he saw an item he was interested in on a page, he could just copy it and paste into a document or even save the entire page. Another thing he loved about his laptop’s browser was that he could access his past downloads. When sending emails, he made less spelling mistakes because of his browser’s spellchecker. There was just so much he could do with the browser that when he got his iPad, he hoped the Safari browser on the device would have similar capabilities.
He found out after a few days of use that the browser did not have all of his laptop’s browser capabilities. He could not search for a particular word on a page and so had to scan through each line on a page until he saw what he was looking for. He found this frustrating. He also could not save a page to view later when he wanted to. Every time, he had to connect to the internet and reload the page. This annoyed him sometimes when the internet connection was really slow. Perhaps, what bothered him the most was moving from the bottom of a long page to the top and vice versa. He had to keep swiping up/down until he got to the top or bottom. He would have loved to have a visual scrollbar just as on his laptop’s browser and be able to any section of the scrollbar to move to that section. Although, his iPad browser could bookmark sites, he wanted an instant bookmark icon or button instead of having to go through some options to bookmark a page. He always had so much to research on and browse that he did not want to spend even a little time doing something that could have taken a shorter time.
Adam has heard of a new browser that is about to be released for tablets. He wonders if it would be better than what he currently uses. For now, he has got no choice but to continue using his Safari browser although it doesn’t do all that he wants it to, because he loves the iPad; he loves being able to move about and browse. He prays the new browser would be better.

Scenario – Adam

Adam wakes up and checks the time. He realizes he is late for his presentation. He had overslept. He quickly takes his bath and gets ready to leave for school. He grabs his iPad and steps out of his house. Fortunately for him, he is able to stop a passing taxi. He hops into the backseat and issues instructions to the driver. The driver stares at the device in Adam’s hands but say nothing. Adam opens the Safari browser on his iPad so that he can go through some online notes for his presentation. His iPad has 3G and wireless connection capabilities. He tapped the History button, looked through for the site he wants and taps it. He gets anxious as the page takes a while to load. In moments like these, he really wished that he could save webpages but unfortunately, his browser did not allow him to. As he waits for the page to load, he taps the tab button and clicks on the ‘+’ button to add a new tab. His presentation is supposed to be about “Derivatives” but he had forgotten to research on a type of “option” under “Derivatives”. He tapped the search bar and typed “Derivatives” into the search field and hit GO. After a while, the Bing results page loaded. He began to scan through the page but he couldn’t see what he was looking for. Again, he wished he could search for a particular word on the page. He was slowly getting frustrated. He added “option” to the first keyword he searched for and tapped search. As he waited for the page to load he went back to the other tab by tapping the tab button and selecting that page from the rectangular list of pages. He began reading from the top of the page and realized that he knew that part of the material already. Last night, he got to somewhere in the middle. He swiped to the top to move lower in the page. He kept swiping and swiping. If he was using his laptop, he would have been able to go to the middle of the page by using the scrollbar but here, he had to go to the middle of the page by manually swiping until he got there. He hated his iPad in times like these. After a while scrolling, he saw he wanted and began reading. He went back to the other tab and looked through the results again. He scrolled down and down and found what he was looking. He tapped the link to open it. After opening, he scrolled until he found what he wanted, highlighted it and saved it as a note using the save option on the menu that popped up. He was almost at school. He considered looking at the rest of the page later and so he tabbed the ‘+’ at the bottom of screen. A bookmark menu pooped up and he tapped “Add Bookmark”. He looked out of the car again and noticed he had arrived at school. He paid the driver and rushed to his class.

Persona - Eve

Eve is 32 years old and is a Human Resource Manager for one of the big firms in Accra. She is not married. She is not tech-savvy but she loves the phone she’s currently using, Nokia X6, a touchscreen phone. She’s found it useful on numerous occasions when she quickly had to look up information on the internet, about once a week. When she’s browsing on her Nokia, she’s either moving about from one office to the other or seated in her car on her way to work. At home she uses her personal computer. When she first browsed on her Nokia, she found the Nokia browser easy to use. Although she doesn’t browse on her Nokia very frequently, she has no difficulty remembering how to use the browser. She enjoys browsing on her phone but she does not consider it as a substitute for her office laptop or home computer, and so she does not do any complicated tasks with her Nokia browser.
She does basic things like using the Home, Previous, Next, Stop and Reload buttons. She does not bother about bookmarking her sites or accessing her history because she doesn’t browse on her Nokia frequently. However, when browsing she likes to browse more than one page at a time and she loves the fact that her browser allows her to do so. As an HR Manager, she loves to google people and read about them a lot but with her current phone, she has to open the Google website and then search using the site. She feels this is a bit of a waste of time, especially, when she compares it to how she can just search using the search bar on her computer or laptop’s browser. When she finds something interesting on a page, she is unable to save it unless it is an image. She gets frustrated when this happens. She wishes there were no restrictions and that she can save text as a contact or even a note on her phone.
Because of Eve’s position, she usually has to send emails to employees of the company. She’d love to use her Nokia to do this when she’s away from her desk but the lack of a spellchecker in her browser discourages her from doing this. She was embarrassed one time when she sent an email full of spelling mistakes. She guessed that some of the mistakes occurred because she kept picking the wrong words mistakenly from the dropdown list as she typed. She loves the fact that she doesn’t have to keep her reading glasses on when browsing with her phone since it allows her to increase/decrease the font size on a page, although, it takes quite a number of steps to do that. She doesn’t wear her glasses while walking. She only uses it when she is seated and has to write or read. It would be perfect if the steps were shortened. When accessing the previous or next pages, she can just swipe to the left or right. She doesn’t bother about her history or bookmarks. She types her URL every time she wants to access her site.
Generally, Eve loves to browse on her Nokia. She finds swiping up, down, left or right enjoyable and finds browsing using her Nokia browser okay. She would be perfectly happy if she could save anything she wanted from a page, be able to go to the top/middle/bottom of a page without manually scrolling and be able to make fewer mistakes while browsing. She doesn’t want to be closing her pages accidentally. She would also be glad if she could search for text on a page. She’s heard of a new browser about to be released. She dearly hopes that the browser would be able to do all she wants to do.

Scenario – Eve

Eve is the Human Resource Manager of her company. She is meeting with the C.F.O of the parent branch of her company today. She checks her time and realizes that the meeting is in about 10 minutes. She tugs her glasses into her coat pocket. She reaches for her file and Nokia X6 phone and heads for the seminar room, 70 meters away from her office. While walking, she decides to browse on her phone. She wants to read the C.F.O’s profile one more time before he arrives. She opens her Nokia browser and begins to type the company’s URL so that she can check her email. She finds it difficult to read what is on the screen but doesn’t reach for her glasses because she can increase the font size. She slows down her walking pace considerably. She taps a button that brings up a list of options. She selects webpage options and then font size. She chooses ‘bigger’. The display is much better now. She taps the email link on the page and waits for it to load. Once it has loaded, she logs in and begins to read the profile of the C.F.O. She increases her walking pace. She wants to check something at the bottom of the profile but she can’t move to the bottom of the page that easily, like she can on her laptop. She swipes continually on the screen until she gets to the bottom of the page. She sees what she wants. It is the number of the contact who sent her the email. She taps the number and selects copy from the popup menu. She goes out of her browser to her contacts and adds the number to her contact. She hated leaving her browser to do this. She wished her browser could just add to contact without her having to copy and paste. She decides to call the number and confirm the meeting time. She confirmed the time by email yesterday but she wanted to confirm again. She calls and finds out that the meeting is coming on as planned but the C.F.O. would be coming with the C.E.O. She begins to panic because she least expected it. She has to do some background research on the C.E.O. She hurriedly gets to the seminar room and gets seated. She looks for the Google search bar but remembers that her browser doesn’t support it. She opens the Google homepage in a new tab and types the name of the C.E.O of the company into the search field and clicks search. She picks one result and clicks on it and begins reading. Eve goes back to the other tab with her email and composes an email informing the receptionist that she’s expecting two people. She prays and hopes that she hasn’t made mistakes in her email as she sometimes does because her browser has no spellchecker. She doesn’t want to feel embarrassed. As she sits in the seminar room waiting for her guests, she reads the profile of the C.E.O. She decides to save that page but she can’t. She can’t save it as a note as well and so she copies the entire profile, leaves her browser to her notes and then pastes it there. Right after, two men walk into the seminar room. Her meeting is about to start and so she puts her phone away. She politely greets them and the meeting starts.

First Prototype Evaluation


We interviewed 5 individuals; 3 males and 3 females. All participants were students. Two of the males are Computer Science students. The third male and all the females were Business Administration students.

Issues Identified

Look and Feel
1. The interface look should be improved. The design seems too colorful. The interface makes the browser look as though it was meant for children. The color combination was too poor and not at all appealing.
Design and Layout
2. The browser should be more 3D. That would add to the appeal as a browser for at least present day users.
3. The functions of some of the icons are not too clear.
Navigation and Structure
4. Being able to access a menu should be an option for those who are not familiar with the touch functions. A menu bar would help.
5. The homepage could be one with links to different subjects like health, news, weather, stock exchange information, entertainment etc.
6. The user could not figure out how to hide the search box. The Ajax powered suggest function already in url boxes is good enough.
7. Most participants thought shaking the decives left and right to go to the homepage was a good idea.
8. Making an anti-clockwise swipe on the screen to reload the page was preferred to making an “R” shaped swipe.
9. The “S” motion swipe should be made for saving a page.
10. Tapping twice to stop a page from loading was preferred.
11. One user suggested arrows at the button or the
12. The navigation touch features are okay. This includes the swipe left or right to move to Previous or Next Page, Swipe Upward or Downward to scroll-upwards or downwards etc.
13. One user did not seem to think that there was much use for the pop-up search box.

Issues to be Fixed

1. The look and feel of the browsers would be improved upon considerably to make users comfortable using it
2. Some of the touch functions would be changed according to user preference
3. The navigation functions would essentially be maintained but we might include a simple navigation panel at the bottom of the browser

Feedback and Impact

Feedback provided by Thomas Arend, Lead Product Manager, Mozilla Mobile

Hey Jacque, Benjamin, Stanley, Isaac, and Samuel - great job! Thanks for posting the results of your project to the wiki. Let me share some random thoughts:

  • Project Overview:
    Great summary. Short and to the point. I would suggest to mention "multi-tasking. Also: most users don't just "browse" the web anymore. And browser have built-in features like tabs or windows to switch between web context. Firefox for mobile, for example, allows users to use the URL bar for searches, which resolves one of the issues you mention right there. Saving text (as PDF) is supported by Firefox (and probably by other mobile browsers), and spellchecking could be done with a browser add-on easily. However, you still have a very important point there: The key is that users interact and live their online life while interacting with other people, creating content and sharing it across their social graph. That is what you want to focus on. One thing to note is the debate about tablets: are they like large phones? Or are they keyboard-less laptops? The answer is probably: neither. There are new paradigms that are specific to tablets which make designing for them such an (interesting) challenge and opportunity at the same time. Hence, your assesment of the need for a tablet-optimized mobile browser are spot on!
  • Personas: 
    I really like your personas Adam and Eve :) I would suggest to check your assumptions by figuring out whether those two personas represent all different classes of users and scenarios you could identify. In other words: do Adam and Eve represent all major use cases that you want to optimize for, or are there other important ones. One recommendation would be: keep personas and scenarios super short. It should be easy to know your personas in less than a sentence, if possible. You can separate persona description from scenarios, however you seem to mix both a little bit. I usually just use one short (!) paragraph and photo (from Google Image search, for example) to introduce my personas, e.g. John Doe, 31, bank teller, is online all the time on multiple devices, ... etc. Please also note that scenarios describe an actual unmet user need or requirement, but never any concrete implementation details. So instead of saying "he grabs his ipad and opens a window to do a Google search" you rather want to abstract a little and say "he can find the details of the restaurant while also looking at a map" or something like that. Advantage: you don't limit creativity and innovation by suggesting a concrete implementation approach. You want to keep all options open, even the one where the persona actually combines his activity by using multiple devices, etc.
  • First Prototype Evaluation:
    Great stuff. It would be nice to know more details about your interview setup. Where did you interview them? Which kind of users were they. Which were the questions you asked? Did you capture video footage or photos? What did you interview them about (their browsing behavior?). What were the top issues and ideas you got? Did you find any patterns? If so: which were those? Which insights do you consider most useful. And: the "now what" - now that you know that, what is your recommendation? Which area would you suggest to look into more? What would be next steps to build something better? Which aspects should be looked at more?

Great Job!! Feel free to contact me anytime at if you have any questions or additional comments. Thanks!