CS346_IP5

User Interface Design – Individual Project Colorado Technical University CS346: User Interface Design Professor Sheikh Shamsuddin September 7, 2021 Table of Contents

Project Outline ............................................................................................................................................ 3 User Interface Technical Requirements ....................................................................................................... 4 Kiosk ........................................................................................................................................................ 4 Smart Device App .................................................................................................................................... 5 User Interface Human Interaction Requirements ........................................................................................ 6 Kiosk / Smartphone ................................................................................................................................. 6 User Interface Design Prototypes ................................................................................................................ 8 Kiosk Interface ......................................................................................................................................... 8 Smart Phone Interface ........................................................................................................................... 11 Usability Test Questionnaire ...................................................................................................................... 13 Introduction ........................................................................................................................................... 13 Demographics: ....................................................................................................................................... 13 Questionnaire ........................................................................................................................................ 14 Usability Questions ............................................................................................................................ 14 Application Function Specific Questions ............................................................................................ 14 Comments ......................................................................................................................................... 15 Usability Test Instruction Guide ................................................................................................................. 16 Usability Test Results ................................................................................................................................. 19 Final User Interface Design ........................................................................................................................ 22 Kiosk ...................................................................................................................................................... 22 Mobile App ............................................................................................................................................ 23 References ................................................................................................................................................. 24

User Interface Technical Requirements Kiosk Since Charleston is a historical city, we want to make an effort to have the most minimal visual impact as possible, for this reason we will be using a small, 16” touchscreen on a double-sided kiosk, to allow it to serve multiple users at once. We will also be following the Eight Golden Rules of Interface Design as outlined in (Shneiderman, B. et al., 2016). In order to Seek Universal Usability , the height should be low enough that it is accessible to individuals in a wheelchair. Additional accessibility options for visually impaired individuals include voice controls such as speech to text input, as well as audio output such as text to speech, and pre-programmed meta data describing images displayed on the screen. For visually impaired individuals, by default we would display a large font size so that if someone has difficulty reading small print, they don’t have to fumble through settings to increase it. Since Charleston is an International tourist destination, the kiosk should provide support for text as well as voice translation into multiple languages and should provide images for reference. As an additional courtesy for visitors that may be from another country or outside of their service area, the kiosk will serve as a free high speed Wi-Fi hotspot.

Smart Device App The free smart phone app should be available on the Apple App Store as well as the Google Play Store and will be compatible with Android, Apple iOS, Windows, and Linux based operating systems such as Chrome OS. The screen size should have an adaptive display to fit the various screen sizes ranging from the smallest cell phone to tablets and even laptops and Chromebooks. The ability to rotate the device and switch between a portrait and landscape view is also a requirement. Voice commands should be integrated with various existing input and output tools such as Siri, Alexa, Cortana, and Bixby. Input would be either through touchscreen on phones and tablets or by keyboard on a laptop. Support for a stylus should be included for those with dexterity limitations that would prohibit precise selections with the user’s hand. Camera integration can be used in the form of Augmented Reality, (AR) which can take a picture or focus on a location and display details of the item in view.

queries. In order to aid with navigation, at the top of the screen, beneath the search bar will be the path taken reach the displayed result, such as “Downtown > Food > Southern > BBQ” so the user doesn’t have to remember what path they took to get there and can easily hit “Back” or click on “Southern” to get similar results. When a particular attraction has been selected, on the Kiosk there will be a “Plus” icon in the top right corner to “Send information” that, when selected, the user can choose to have the information sent to their smart device via SMS or email. On the smartphone app there will be a button to select “Add to Favorites” in its place. These are the only minor differences between the kiosk and smartphone. Both devices will enable an embedded view of Google Maps displaying a “You are Here” as well as the destination marker. Additionally, both devices will have the ability to zoom in and out at any point. If a new user comes to the device, by hitting the “Back” button repeatedly, they can be returned to the home screen and begin a new session.

User Interface Design Prototypes Kiosk Interface The Kiosk welcomes users to Charleston and provides an immediate search bar at the top, and an outlined languages section at the bottom. It is important to have the languages displayed in characters and languages that speakers would recognize. Once a language is selected and the user clicks “BEGIN” they will be taken to the next screen, which gives a list of categories on the left column for the user to choose from. NOTE: The above prototype for the Home Screen would be edited before production to utilize the same navigation scheme that was established later during design: A Gray Search Bar and Dark Blue navigation fields with Yellow Text.

Next, once the user selects a Destination, a description of that attraction is displayed, along with an additional image. Also, important to note is the search bar as well as a back button so the user can easily undo a selection. Included on the attraction details page is a map, as well as options to get directions from that specific Kiosk, or to Send the information to their phone. If the user decides they are interested in a new category, they can simply select it from the menu on the left and begin browsing a different topic. The Kiosk will feature an auto timeout function to return to the Welcome screen after a period of inactivity, and also has a physical Home button on the Kiosk, located outside of the touch screen for an instant restart.

Smart Phone Interface The Smart Phone Home screen welcomes users to a similar format, complete with a search bar, a language select in the form of National Flags, accessibility options and a Begin button. If the user clicks in the Search bar an on-screen keyboard will display in the bottom half of the screen for them to enter their query. One the user selects Begin they are taken to a Home page that displays text and icons displaying the categories. Once a user has selected a category, they will be taken to a list of sub categories, also using photos and texts. It is important to note the familiar color scheme with the search bar in gray and navigation using Dark Blue and Yellow. The user is presented with a Menu button in the top left, that when selected provides options to navigate to any different category, or to “Save” or “Bookmark”. On the top right is a back button in case the user only wants to go back one screen to their previous selection.

Usability Test Questionnaire Introduction : The usability questionnaire allows us to obtain direct feedback regarding experiences and suggestions from the actual users of our product. This feedback will allow us to identify glitches and errors and remove them, as well as implement additional features that our developers did not initially consider implementing. These updates will allow our product to constantly evolve with changing user preferences and stay competitive and relevant in the ever- shifting market. Demographics: The target demographics for this kiosk need to be very diverse. Charleston, SC is known as a “College Town” as it is home to the College of Charleston, The Citadel, Charleston Southern University, Trident Technical College as well as a few satellite campuses for various other colleges and universities. For this reason, the Kiosk will be serving new students who have moved from across the country. Charleston is also a popular vacation destination so it should be designed for middle aged adults, accompanying teens, as well as senior citizens. Since Charleston is an international tourist destination, it needs to be designed for an international user base as well.

Questionnaire Usability Questions The application covered relevant topics that I was searching for Strongly Disagree Disagree Neutral Agree Strongly Agree The application answered my questions Strongly Disagree Disagree Neutral Agree Strongly Agree I used the information received from the guide Strongly Disagree Disagree Neutral Agree Strongly Agree The visual aids (photos) were helpful Strongly Disagree Disagree Neutral Agree Strongly Agree The directions and maps were accurate Strongly Disagree Disagree Neutral Agree Strongly Agree The descriptions of the locations were accurate Strongly Disagree Disagree Neutral Agree Strongly Agree The locations met my expectations Strongly Disagree Disagree Neutral Agree Strongly Agree I had questions the application did not answer Strongly Disagree Disagree Neutral Agree Strongly Agree I was able to save / forward the information to my personal device Strongly Disagree Disagree Neutral Agree Strongly Agree I would recommend the application to a friend or family Strongly Disagree Disagree Neutral Agree Strongly Agree Application Function Specific Questions The application was available in my language Strongly Disagree Disagree Neutral Agree Strongly Agree The application provided results quickly Strongly Disagree Disagree Neutral Agree Strongly Agree The accessability features were acceptible for my needs Strongly Disagree Disagree Neutral Agree Strongly Agree The application was easy to understand and navigate Strongly Disagree Disagree Neutral Agree Strongly Agree I encountered a system error during my use Strongly Disagree Disagree Neutral Agree Strongly Agree

Usability Test Instruction Guide Introduction : Thank you for taking the time to provide feedback on our application. Your answers will help us make improvements on our design for future users. Please be as honest as possible so that we can collect accurate information. Disclaimer: Any information collected by this survey will only be used for development purposes and will not be shared with any third party. No personally identifiable information will be collected or stored. The demographic requests are to further identify areas for improvement. Please select One: Demographics : Before beginning, please answer the following brief questions so that we can better understand your experience with our application: (Fontanella, 2021) Demographics Questionnaire Question: What is your age? Choices: 0 - 15 16 - 30 30 - 45 45+ No answer # of Answers 2 2 1 0 Question: What gender do you identify as? Choices: Male Female Other Prefer not to answer # of Answers 2 3 0 0 Question: What is the highest level of education you have began / attempted? Choices: High School Associates Bachelors Master s Doctorate # of Answers 1 2 3 0 0 Question: What is your annual household income? Choices: < $25k $25k - $50k $50k - $100k > $100k No answer # of Answers 1 2 1 1 0 Question: What is your employment status? Choices: Full-Time Part-Time Unemploye d Retired No Answer # of Answers 3 0 1 1 0 I consent to these terms and conditions Agree Disagree

Usability Test Instructions: 1. To begin, please select your language from the bottom of the home screen (1.a), and then select “Welcome” (1.b) 2. Next, please select a category from the main menu (2.a) and use the scrollbar on the left (2.b) to view your options. Please select a subcategory (2.c).

Usability Test Results Usability Questions Question: The application covered relevant topics that I was searching for Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 1 2 2 Question: The application answered my questions Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3 Question: I used the information received from the guide Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 1 2 2 Question: The visual aids (photos) were helpful Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3 Question: The directions and maps were accurate Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3 Question: The descriptions of the locations were accurate Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3 Question: The locations met my expectations Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 5 Question: I had questions the application did not answer Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3

Question: I was able to save / forward the information to my personal device Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 1 2 Question: I would recommend the application to a friend or family Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 3 Application Function Specific Questions Question: The application was available in my language Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 1 4 Question: The application provided results quickly Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 5 Question: The accessibility features were acceptable for my needs Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 5 Question: The application was easy to understand and navigate Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 4 1 Question: I encountered a system error during my use Choices: Strongly Disagree Disagre e Neutral Agree Strongly Agree # of Answers 2 2 1