Project Part 3

 Group Project 3: Conceptual & Physical Design


Task 1 - Locating the shuttle bus page from home page of UTMSmart



Task 2 - Checking the bus availability and wait for bus




Task 3 - Exploring the ways to reach KDOJ from KTHO


Alternative Design - Goh Jiale


Alternative Design - Nawwarah Auni

Alternative Design - Lubna Al Haani 

Alternative Design - Neo Li Xin


Alternative Design - Brendan Chia Yan Fei




Voting For Best Design









Wireframes


Task 1 - Find Shuttle Bus Page on UTMSmart application


When designing for task 1, we employed Shneiderman’s Golden Rules, Gestalt Principles and also included some of the usability and user experience goals to give the user a simple and compact design.


Shneiderman’s Golden Rules : 

Rule 3 : Offer Informative Feedback

Every time users perform the task, the shuttle bus page will be immediately displayed as the next page to give the users fast and clear feedback that they found the shuttle page they wanted to go to.


Rule 5 : Offer Simple Error Handling 

This UI design of task 1 allows users to perform the task in 2 ways, which is directly from the UTMSmart Homepage or from the menu of UTMSmart after clicking the hamburger icon. This way, when some user who accidently click the menu out of habit, they still can get access to the Shuttle Bus page.


Rule 6 : Permit Reversal of Action

This design is equipped with a “back” button to allow users to reverse their action to recent previous activity rather than reset all their activity by going back to the UTMSmart Homepage with a home button represented with a home icon.


Rule 8 : Reduce Short Term Memory Lost

The simpleness of the design, which is the button for Shuttle Bus page directly on the application homepage, facilitates the users to remember the flow of the task easier.


Gestalt Principles : 

  1. Enclosure : On the homepage, all the information for showing where the shuttle bus page is grouped in one box helps users to read faster and understand easier.


Usability and User Experience : 

  1. Effectiveness : The task is easy to perform with just one or two clicks based on the user's preferred way.

  2. Efficiency : The users can perform this task in under 2 seconds.

  3. Memorability : The design is simple and easy to remember as it is always direct for the users.


Task 2 - Find Bus Availability


For Task 2 UI design, we implemented shortcuts for “On Location” feature according to the Shneiderman’s Golden Rules, the Gestalt Principles and also referencing the usability and user experience goals to produce a simple and user-friendly interactive design.

Shneiderman’s Golden Rules : 

Rule 1 : Strive for Consistency

All the sequence of the step in the task is represented in rectangle shape to help the users to focus more when performing the task.


Rule 3 : Offer Informative Feedback

After users perform a step, the next page will change immediately with specific distinctive detail for the users to understand their current situation such as what page they are on at that time.


Rule 7 : Support the Internal Locus of Control

When performing the task, the users can easily predict what they need to do and what is the consequence of it such as, when users click on the “available” word button to go to the bus available bus page which shows a clear navigation to the users.


Gestalt Principle :

  1. Similarity : All the buttons are presented in many rectangle shapes with different sizes.

  2. Continuation : The map to show the bus route is shown as a continued line distinctly and clearly presented to help users easily see it.

  3. Enclosure : The list of available buses and its details are separated by a faint line to avoid confusion.


Usability and User Experience : 

  1. Findability : All the buttons are easy to find with distinctive detail.

  2. Efficiency : Users can perform the task with one click.

  3. Learnability : The users easily learn and understand each button function as it is equipped with an understandable word.



Task 3 - Exploring ways to explore different destinations



For task 3, we also incorporated Shneiderman’s Golden Rules, Gestalt principles, and some necessary usability and user experience goals.


Shneiderman’s Golden Rules:

Rule 1: Strive for consistency

For the UI design of this app, we used the rectangular shape for every button and size of the buttons are consistent throughout the page. The top and bottom panel also have similar length and width. These consistencies provide a comfortable experience for the users as they are able to navigate through the app easily. 


Rule 3: Offer informative feedback

Whenever the user performs a task, the next page will display the same exact input done in the previous page to notify them what they are searching for exactly. Here, the last wireframe for each bus scheduling type indicates the related information they are searching for.


Rule 7: Support Internal Locus of Control

There’s an additional function in Automatic Schedule which is add stops where it allows users to add places they want to stop before reaching a certain destination, hence giving user control and freedom. 


Gestalt Principle:

  1. Similarity - Same shape and size of buttons

  2. Proximity - In the lists page of Bus Schedule, white spaces exist between them for clear separation 

  3. Continuation - In the last page of Bus Schedule, different time of bus arrival are place in series in a line to group them clearly for easier readability


Usability and User Experience Goals:

  1. Satisfaction - Grouped information lined in a row 

  2. Learnability - Simple-to-understand icons at bottom panel

  3. Effectiveness - Feedback immediately given in the next page after each input



Interaction Metaphors



Hamburger Icon



(Wireframe Task 1)


Users can tap on this three-dash graphic to display a menu in which they can navigate to the shuttle bus page . The analogy resembles a list and the metaphor can be visualised as  a three-layer hamburger.

“Back” Symbol


(Wireframe Task 1/2/3)


The back symbol ( a left-pointing arrow ) indicates the action to return to the previous page or state. The back symbol metaphorically represents the concept of going backwards in a sequence

Location Icon


(Wireframe Task 3)

The live location icon metaphorically represents a user's current location and movement. This is important for users to estimate the arrival of a bus 

Plus Symbol



(Wireframe Task 3)

Users can utilise the plus symbol to add stops along the way to their destination. It is associated with interaction metaphor as it signifies expansion, similar to how it signifies addition in mathematical notation

“Available” Icon



(Wireframe Task 2/3)

The checkmark icon which is  often associated with availability, metaphorically represents a green light, indicating an action can proceed smoothly.Users can tap on the checkmark to check the availability of buses in order for them to plan their trip

Comments

Post a Comment

Popular posts from this blog

UTM Bus Transit System - Project Proposal

Image
Group Name : HCI Visionaries The 17 Sustainable Development Goals Linked : 11. Sustainable Cities and Communities Problem In UTM, buses play a crucial role as a means of transportation as a significant portion of the students rely on it to attend classes or commute to other campus facilities. It is undeniable that the bus system in UTM is significant and efficient as they could carry a whole lot of people to a certain place compared to vehicles like cars or motorcycles.  However there are quite a few problems which buses have, one of the main problems we want to solve is the reliability and punctuality of the bus arrival time. These uncertainties can lead to inconvenience for students who rely on buses for their transportation needs. Additionally, the mental strain of worrying about whether they have missed the bus adds to the burden. For instance, students may be late for their classes or events if the buses does not arrive on time. Not to mention the difficulty in estimatin...
Read more

Project Part 4

Image
 Group Project 4: Prototyping & Evaluation Introduction – prepared by Haani In the project part 4, we will conduct a testing and evaluation with our system prototype. Our prototype is called “UTM Bus Transit System” and the final product can be accessed through an application called “UTMSmart” that is officially used by University of Technology Malaysia (UTM). Our system is the enhanced system of the current UTM bus system with some extra useful features to ensure better user experience. Additional features that we put in our system include live location of UTM buses, bus planner system, graphical route presentation for each UTM bus, etc. The objective of this prototype testing and evaluation is to validate the function of the bus's live location, graphical bus route and also the bus planner. Therefore, this testing phase is focused on testing these functions with the user and evaluating them based on observation of the user reaction to our system.  This testing phase is...
Read more

Project Part 2b

Image
Gathering Requirements - User Analysis 1. Proposed Tasks Task 1: Locating the Shuttle Bus Page from the Home Page of UTMSmart Task 2: Checking Bus Availability Task 3: Exploring the Ways to Reach KDOJ from KTHO 2. Persona Us er 1: Local Student Tan Zhao Chuen is a 20-yr Chinese university student who studies mechanical engineering at UTM. He is highly interested in this particular course because of his passion for automation and robotics. Although the subjects in his course are tough, he is able to complete the assignments in time and maintain a 4.0GPA last semester. He has always been a hardworking person and consistently strives to achieve his goals. During his free time, he loves to jog around UTM campus, especially in the evening. He usually jogs 3 to 4 times a week to maintain a healthy lifestyle. Although he might seem shy, he...
Read more