Usability Testing

To measure the usability of our application we tested 6 users on completing a set of tasks that we prepared based on the goals to be accomplished. For each user observations were made on completion of tasks. Also to test the functionality of all the areas of our application we created the two scenarios mentioned above to record more observations. At the end of the test the users were given a short questionnaire to fill in for additional information about their experience having the test. The observations were analyzed and the conclusions were made as follows.

Questionnaire results
1. All users agreed that they could complete all the tasks given.
2. 3 out of 6 users had problems reaching their goals mainly due to the fact that that it was unclear if they had actually selected an item from the menu.
3. All users agreed that they would use the application again whenever they have the need for ordering.
4. Generally almost of the users found out application very simple to use with the exception of 2 users who found it moderately difficult because of the problem identified in result (2).

Success Rate: We had an overall success rate of 100% of user being able to complete task and a 50% failure rate if users not being able to reach their goals.

User behavior: The users understood the task and were comfortable and relaxed during the test. They recognized the different components of the user interface and could use them based on working knowledge

Speed: users were able to finish the test on an average of fewer than 3 mins

Conclusion
We believe that our usability test was successful and we captured the most important areas of our application that work well and the parts that still need to be improved.  In addition we tested for failure, user behavior and speed.

Usability Test 1

Usability Test 2

Usability Test 3

video 3

Usability Test 4

video 4

Usability Test 5

video 5

Usability Test 6

video 6

Screens of the Application

Welcome Screen

Menu Food

Menu Drinks

Menu Specials

My Order

Final Screen

UI Design

Last week we did the sketch and story board for our application. This week we finally started to design it, using a tool called Indigo Design, where we added pictures, colours and some functionality so the user can visualize how the application will look like when its ready.
You can check it out the result on the link: Easy order App

Sketching & Prototyping : Design Part 1

Designing the structure

Now that we have a good hierarchial information archtecture and most of our navigation is organized we will be adding more structure through designing the UI using activity flow diagrams , sketches and storyboarding . Also paper prototyping guerilla tests were performed with our users which helped to refine misunderstood or uncertain areas of our design.

Flow Diagrams

To understand the logical sequence of activities in the easy order application we choose 2 main activities that define the application

1. Placing an Order
2. Checking out "MyOrder"

Navigation Structure
The navigation structure is a combination of the two previously mentioned flow charts above. This will help us understand how the two activities come together to help the user accomplish their task / goals.

Sketches 

The sketches are visual representations of the UI that will be used to test the users in the guerilla test. The reason for the paper based sketches are primarily because they are easy to change and update after user reviews.

Gestalt

We use the laws of gestalt to add more clarity to out application user interface. For the menus "proximity" was user to space icons and "grouping" in rows and columns.

Affordances

This can also be found in our design where we have indicated in the side menus active & inactive menus that are "depressed" when active and "raised" when inactive also color shading.

 

Storyboard

-       Storyboard is a sequence of drawings, typically with some directions and dialogues, representing the actions need to be taken in order to reach the goal.

-       In our storyboard we have given a very summarized information, the reason is that user performs the same activity in all three sub menus.

Final flow diagrams & storyboard

The flow diagrams where not changed as they defined the activities efficiently and accurately.These are our final sketches of the storyboard after considering the problems from users after the guerrilla test.

Hierarchal Information Architecture

The architecture will be comprised of a sequence of logical steps/activities that will lead to a desired user goal. The purpose of the structure is to organize information in a way that is useful to the end user.

To achieve this we have looked at the application activates and categorized into the following

- Menu Items
- User Actions

Technique used to design the application information architecture

Card sorting was the primary technique used to collect information about how our target group perceived the application architecture and giving use valuable data for improving it further.

This exercise was conducted for determining the finalized the architecture of the application that was initially designed. The results of this exercise served as input for rethinking the proposed hierarchical information architecture and make changes where necessary after discussion. 

Before Card Sorting

After Card Sorting

0. The final information architecture we have decided after taking consideration from the users card sorting exercise are 2 major changes
   
1. 
   
 Alcohol submenu
- This sub menu will be better for our users to select from a number of
different types of alcoholic beverages 

 Add/edit menu

- We have decided to rename this menu to checkout mainly because of the miss understanding of the purpose of the menu. Renaming it to “Checkout” will be clearer to our user and add/edit will be an action that can be performed.