Download pdf
1. Prototype
A prototype is a working model to predict the system or products before fully developing them. “In web and software interface design, prototypes can be used to examine content, aesthetics, and interaction techniques from the perspectives of designers, clients, and users” (Walker, Takayama, & Landay, 2002). Through the user study we can find possible errors and missed or hidden functions to be implemented. Fidelity is a measurement of how easily a prototype can be developed and differentiated with the fully operated product. Virzi et al. (1996) provides four dimensions of fidelity to distinguish a prototype from the fully operated product. Here are the examples of fidelities from Virzi et al. that matched and explained through my prototype to figure out the elements of them on my prototype.
A degree of functionality: It refers to the prototype’s level of detail. For example, Flow prototype has an uploading function for Make Story that allows users to use pictures and videos or built-in cameras as well as voice recording function in the tablets. Also, Flow application has levels of access. Users can create a story with access permission using story and friend categories.
Interactivity: It shows a type of interface. For example, the prototype can be used in an iPad and it is a touch-based operation, which allows participants to use their fingers. When selecting the pictures in their photo gallery, the participants can experience the function that allows to know the pictures being selected. Participants can experience writing their own story at the make Story page, but it will be a one-time attempt.
Breadth of functions: It signifies the scope of functions that can be modeled in the prototype. For example, participants are only allowed to experience the functionality of how to use the Make Story menu, however; it cannot be saved to their story with writing and voice recording. Therefore, participants can use all functions, but there would be some limitations.
Aesthetic refinement: It refers to similarities between the fully operated product and the prototype. The Flow application has a similar appearance to the product along with similar proportion and a color set to the product.
Through the overview of the four elements of fidelity, I could learn what is the concept of fidelity and what kind of fidelity elements designers should consider when developing the prototype. There was no research about the specific levels of fidelity and mediums, which can improve the results of the user study, so it would not be an accurate measurement, but I can say that the Flow application is a high-fidelity prototype because it includes most functions of the product.
However, there is a debate as to which prototype method is better for user study between high-fidelity and low-fidelity prototypes. Many researchers concluded that low-fidelity prototypes would be a better choice for the developing prototype in that it would save much time and effort as well as money comparing with the high-fidelity prototype (Sauer & Sonderegger, 2009; Walker et al., 2002). Both studies have indicated that a high-fidelity prototype affects usability in the user study as they would develop the mental model during the experiences. Usability is the ease to use of any human-made device and tool, so while using the application users are able to learn how to use that application on the device.
Moreover, the interesting result came from the Sauer and Sonderegger study. Participants improved their usability while using the high-fidelity prototype compare to the low-fidelity prototype, but there were no emotional differences between the low-fidelity and the high-fidelity prototype. Both studies showed that task completion time was reduced when participants use the high-fidelity prototype and this indicates that usability is related to the task completion time but not related to emotion.
However, I have a different idea about fidelity. I have experiences using low and high-fidelity and I preferred using low-fidelity a long time ago because I could focus more on the interaction between the menus and pages. I thought that attractive shapes and color were distracted my concentration from the interaction. At that time, I used a Powerpoint program to develop the prototype and there was no way I could present interaction in that program, but it was a process of developing a mental model. I made all web pages: function and layout rather than the design of images or colors, that designers and programmers could deal with and through each page, all team members shared same mental model in several meetings or themselves.
Now I use prototype program named Axure, which allows designers to create a better prototype interface with less effort and time. Those similar programs include useful libraries with icons and shapes that designers can use without creative process. Also, it provides a one-click interaction function that designers can use without programming capability for interactive movements. Although I agree with the research papers concluded that a low-fidelity prototype is more productive than the high-fidelity one using a high-fidelity prototype is productive if I could utilize a program without much time and effort. It would provide a better interface usability as well as designers can get a preference about a color set and proportionality from the participants. It would reduce the time and effort to conduct the several user studies.
The prototype design may not the final, but participants can experience in the similar condition of the fully operational product. I prefer to use a high-fidelity prototype and it was a helpful method especially for the specific target audiences. Older adults have different physical conditions and preferences than younger adults and to figure out their differences, accurate depth of fidelity is a priority condition. Therefore, I used a high-fidelity prototype and I consider using more high-fidelity prototype for the specific parts of the user study, such as recording voice for uploading story or the page of Community Chats.
2. Specification and Functions
The application interface was developed in prototype format to seek a possibility of interface design based on web design guidelines for use in the tablet-based application for older adults. Here are two designs, which will be two design models to be compared in the user study, which will be measured with time completion rates and system usability scales.
Login – Previous Design
The login application requires a login process to protect personal information. When users create a new account, they join a community center where users can get an assistant in nearby their location or one selected by the users. The selected communication center will also be a future help center to help address problems. This application can also use fingerprint identification system for easy access, in which case they do not need to use a login and password, only their fingerprint to get into the application. The chosen community center is equipped with live help [Figure 1].
Loading page Log-in page Create account page Instruction page
[Figure 1. Previous design – log-in]
Login – New Design
The new application design is more focused on categorization of stories and friends. The difference compared to Facebook is that the new application is a good tool to organize users’ stories and friends. In the log-in page, users will be asked to provide their personal information. The school information, such as high school and university, is important in this new application as it will be a source of searching users’ old friends. For the intuitive use of the application, providing an easy search method for old friends is an important function of this application, and several steps were required to gather the specific information from users [Figure 2].
[Figure 2. New design – Log-in]
My Story – Previous Design
The application can largely be divided into two parts: My Story and Community Chats. My Story is a space for stories archived by individual users. An individual’s old pictures, old videos, and live voice recordings might be a number of methods that can be used as a means of communication for older adults in this application. My Story includes two sub categories: My Friends and About Me. Users can send friend requests after searching for names or phone numbers to create a friendship. The stories in My Story contain various personal photos and videos uploaded with stories recorded or written by the user. The stories in My Story can be shared with friends who have been accepted and given permission to read them. They can leave recorded and written comments about each story. The user can categorize friends into groups to give them permission to see the My Story, About Me, and My Friends sections. The user can also visit their friends’ stories and leave voice or written comments [Figure 3].
My Story page Story detail page Friend list page About page
[Figure 3. Previous design – My Story]
My Story – New Design
From the previous user study, I decided to separate the My Friends menu from My Story. Therefore, the current application structure has three main menus: My Story, My Friends, and Community Chats. Most participants in the previous user study were confused with the menu structure. Although this application had two main menus, there was a shortcut icon for Friends’ News at the bottom of the main menu for convenience, but participants were confused with the menu, My Friends being placed in the My Story and Friends’ News being placed in both the My Story and the main menu on the bottom. Also, Create Story was placed in the main menu in the bottom. Feedback from several users was taken into consideration and integrated into the new menu structure [Figure 4].
Due to the previous user study, the color palette was also changed. The orange color has somewhat high contrast, so it was changed to lower contrasted orange [Figure 5].
[Previous My Story interface] [New My Story interface]
[Figure 4. My Story]
[Figure 5. New design – My Story]
Setting – Previous Design
In the Setting menu, the user can adjust contents such as font size, contrast, and friend categories. Users can also control privacy settings like who can see their friend list, account, and social media. This section was designed for impaired people and for flexible use of interface design, depending on each user’s preference [Figure 5].
New Setting – Hamburger Menu
The Setting menu was changed to a hamburger menu, so users can use the Setting menu no matter what page they are on. The new Setting menu includes several additional submenus such as How it works, Notification, Help & support, and Log out [Figure 6]. Also, color palate was changed to light blue, which is same color palate with Create Account menu.
Previous Setting page New setting page .
[Figure 6. Setting]
My Friends – Previous Design
My Friends was located in My Story in the previous design. Users could send friend requests to other users by searching for names or phone numbers in the Flow database. The app allows users to categorize their friends into groups as well as give friends permission to see information in the My Story, About Me, and My Friends sections [Figure 7].
My Friends – New Design
In the new version of the app, My Friends was moved to the same hierarchical level as My Story and Community Chats, thus resulting in a three main menu structure. Also, Friends’ News in the main menu, which was a short cut, was removed from the main menu due to confusion of users. Green color was allotted for the My Friends menu to distinguish with My story and Community chats. Friend list has categories to help users organize their friends [Figure 8].
My friends now provides all friends’ information: link of each friend’s story page, categories for reading permission, request list, and search menu for looking for their friends. Also, the menu My friends includes recent stories of their all friends.
[Figure 7. Previous design – My friends]
[Figure 8. New design – My friends]
Community Chats – previous design
Community chats is a personal chatting place protected and isolated from the public, and only invited people can converse in the chatting space. Since most older people may be concerned about security and privacy, a chatting room was developed to address such personal needs. Community chats can be used in many ways such as meeting, family reunion, community room, and consultation. They can share photos and videos while having a conversation with friends invited to the chat room. For the consultation, they can make a chat room with their doctors or caregivers to ask for health-related help [Figure 8].
Community Chats – new design
The detailed page design was changed with a new media uploading design. The simpler design was implemented from the observation of the previous user study. The process steps were reduced and intuitive design was attempted. Most participants were confused with uploading a story and the chatting page. The several media uploading functions were the problematic parts, so they were modified to be simple [Figure 9].
[Previous Community Chats interface] [new Community Chats interface]
[Figure 9. Community chats design]
Community Chats Setting
Users can manage their community chats’ list through activities like changing room names and adding and deleting participants in the chatting room. Users who are in the chat room can invite their friends, and individual users are free to leave the chat room at any time. Only members in that room can discuss and see their conversation. This page was designed as a secured communication room for a group of users utilizing the Flow application [Figure 10].
Voice Instruction
Most pages have an instruction icon that was developed to explain the specific functions of each page via verbal instruction. A male voice was used for the voice instruction and based on web design guidelines. Users can select areas or icons to learn about specific functions, with voiced instructions informing users about the functions of particular areas [Figure 11].
[Figure 10. Community chats setting design]
[Community chats page] [Chat detail page ]
[Figure 11. Voice instruction design]
3. Reflection
One of the first my question I had when starting the user study of application was how detailed the prototype should be. According to my experience, I had preferred a low-fidelity prototype for the web site development. I was a planner and I needed to provide programmers and designers with an interactive all site structure. I did not use any links or interactive elements but all team members could develop their mental model through the paper prototype discussing and contributing to the progress in the same direction. Each page had many menus that had connected to each other from within the pages, to the other pages, or from the user interface to the administrator page.
There were designers who will create the icons and the interface design, so I focused on the relationship between pages. Although there would no images and colors it was enough to develop the mental model of those projects. As there were no direct interaction using links or any interactive functions, all team members needed to discuss some of the parts that could not be understood in the paper prototype.
However, as technology develop so rapidly, there are many good prototype tools, with which designers can utilize to save their time and effort, as well as add more beneficial built-in functions into the program. If we could provide more beneficial usability, why don’t we use those prototype tools? Moreover, in the mobile application development, providing better usability is enough to change users’ behaviors and their thought or bias. To adapt the new recording voice function for the older adults in the last user study we asked participants’ preferences between recorded voice and written text in uploading their stories. Although many research studies have shown that voice-based methods are easier for older adults to use (Dickinson & Hill, 2007; Wright, 1999), eight participants (73%) in the second interview said they would rather use typing due to its accuracy and because it allowed enough time to review their responses. Two participants preferred to use writing functions in the second interview, but changed their minds in the last usability survey, so half of the participants thought positively about the voice recording function by the end of the study. The result shows an interesting finding: through the user experience that they changed their mind.
I think the choice of which level of fidelity you will use is based on what kind of project you are involved in. Designers should consider a suitable level of prototype for their project. I recommend the use of prototype tools such as Axure, Invision, or Justinmind. Those prototype tools are very useful and productive methods to create a prototype.
References
Dickinson, A., & Hill, R. L. (2007). Keeping in touch: Talking to older people about computers and communication. Educational Gerontology, 33(8), 613–630.
Sauer, J., & Sonderegger, A. (2009). The influence of prototype fidelity and aesthetics of design in usability tests: Effects on user behaviour, subjective evaluation and emotion. Applied Ergonomics, 670–677. http://doi.org/10.1016/j.apergo.2009.09.002
Virzi, R. A., Sokolov, J. L., & Karis, D. (1996). Usability problem identification using both low- and high-fidelity prototypes. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems Common Ground – CHI ’96, (February), 236–243. http://doi.org/10.1145/238386.238516
Walker, M., Takayama, L., & Landay, J. A. (2002). High-Fidelity or Low-Fidelity, Paper or Computer? Choosing Attributes when Testing Web Prototypes. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, 46(5), 661–665. http://doi.org/10.1177/154193120204600513
Wright, K. (1999). The communication of social support within an on-line community for older adults: A qualitative analysis of the SeniorNet community. Communication Quarterly, 47(4), S33.