"The broader one's understanding of the human experience, the better design we will have." - Steve Jobs




10. Interactive Prototype:
The Dining Experience, Designed



Posted on Wednesday, 15 April 2017
#Post #InteractivePrototype #Final

Although design is an iterative process, there will be times when you may have to sound the bells of completion… for the time being. The stage when you decide that it is time to start developing the software based on your designs. Of course it does not mean that this iteration of the design will be cast in stone. Like most software of the modern world, incremental updates can still be released on a regular basis.

The design decisions were made based on the research taken at different stages of the project. Here is a summary of these decisions, and their design rationales.

Five-stars rating system

A literature review of a study on the usability and effectiveness of web-based trust rating systems was conducted (Pranata, Skinner, & Athauda, 2013). Its results indicated that five stars were generally the most useful and efficient, as well as intuitive, when compared to binary and notation-based systems.

Gregorian-style grid-view calendar interface

A combination of literature reviews and my own self-conducted user studies helped to come up with a decision to go with a grid-view calendar. It was found that a list-view calendar worked better if users needed to search for specific dates, but a grid-view calendar worked better when searching for days (Hund et al., 2014). This result was taken into consideration. I then conducted a user study investigating the mental models of users when they were placed in the scenarios that were being investigated, and concluded that “days of the week” was a much more important event-scheduling attribute in these scenarios. Therefore, a grid-view interface was chosen.

A user’s existing calendar events must be shown

My user study, which investigated the mental models of users when they were placed in the scenarios that were being investigated, led to the finding that “existing scheduled events of the day” emerged as the most important event-scheduling attribute which popped up in the minds of the respondents. Therefore, it was necessary to design a feature which pulls a user’s events from their online calendars, and display it on the interface.

Top five most important restaurant attributes, which should be displayed

My card-sorting exercise based user study, coupled with a scoring system, was used to determine the top five most important restaurant attributes. These attributes were then designed to be easily spotted and understood by users. The top five attributes are “Quality of Food / Beverages”, “Average User Rating”, “Price Range / Price Category”, “Ambience” and “Photos”.

List-based interface to display restaurants (rather than map-based)

Two interactive prototypes were developed — one featuring a map-based navigation interface and one featuring a list-based interface. Users tried out both interfaces, and the general consensus was that the list-based interface was simpler and more intuitive. The map-based interface provided additional functionality, but was not very necessary in the scenarios that were being studied. Furthermore, the map-based interface would fit a mapping application better than it would fit a restaurant recommending application.

Incorporate the “horizontal swiping” mechanism where contextually relevant

A study brought about the finding that horizontal swiping interaction techniques increase user engagement, due to providing users with greater levels of interest and control (Duo & Sundar, 2016). This applied to all users, and not just power users. It was also contextually relevant to implement such an interaction technique in two places of the final design.

A dark-on-light color scheme featuring orange accents

While light-on-dark color schemes were good for apps that are used often at night, a dark-on-light color scheme can increase legibility in normal use (Bauer & Cavonius, 1980). Further research on color psychology led to the findings that colors ranging from red to yellow evoked a sense of food in many, and participants perceived such colors as being “sweet” (Gong et.al, 2017). The orange color is also widely thought to evoke an appetite (Vastani, 2012), and is considered fun and easy-going, often associated with healthy food (Digital Skartch, n.d.).

Interactive Prototype

Interactive Prototype 10 features the final design. It incorporates all the design decisions made throughout the course of this research. Feel free to play around with it.



Instantaneous Scenario

When you first begin, you'll see restaurants shown in a list. These restaurants can be bookmarked. Try it out!

You can view the restaurant information by clicking on "More Information".

Scheduled Scenario

Click on the "Start New Plan" button at the bottom of the screen. Follow the instructions, as well as the prompters (blue background) to try out the proccess of scheduling an event!




Other Prototypes

Throughout this project, multiple interactive prototypes have been designed. These prototypes have been saved and hosted for your viewing. Click here if you're interested!



References

  • Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137–142). London: Taylor & Francis
  • Digital Skratch. (n.d.). Color can influence emotions in a way that few other mediums can. Digital Skratch. Retrieved February 01, 2017, from http://digitalskratch.com/color-psychology/
  • Dou, X., & Sundar, S. S. (2016). Power of the Swipe: Why Mobile Websites Should Add Horizontal Swiping to Tapping, Clicking, and Scrolling Interaction Techniques. International Journal of Human-Computer Interaction, 32(4), 352–362. doi:10.1080/10447318.2016.1147902
  • Gong, R., Wang, Q., Hai, Y., & Shao, X. (2017). Investigation on factors to influence color emotion and color preference responses. Optik, 136, 71–78. doi:10.1016/j.ijleo.2017.02.026
  • Hund, P. M., Dowell, J., & Mueller, K. (2014). Representation of time in digital calendars: An argument for a unified, continuous and multi-granular calendar view. International Journal of Human-Computer Studies, 72(1), 1–11. doi:http://dx.doi.org/10.1016/j.ijhcs.2013.09.005
  • Pranata, I., Skinner, G., & Athauda, R. (2013). A survey on the usability and effectiveness of web-based trust rating systems. Paper presented at the Computer and Information Science (ICIS), 2013 IEEE/ACIS 12th International Conference on.
  • Vastani, S. (2012, March 19). Meaning and Uses of Colors in Logo Design. Think Design. Retrieved February 01, 2017, from http://blog.logodesignguru.com/meaning-and-uses-of-colors-in-logo-design/