Interactive Prototype: The Dining Experience, Designed.

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: Presenting the final design

Both the “Instantaneous Scenario” and the “Scheduled Scenario” have been incorporated in this final design interactive prototype. Do follow the prompters (shown in a blue box) to effectively use the interactive prototype.

The interactive prototype is available on the Designing the Dining Experience website, which can be found here!

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/