Human-Computer Interaction Assignment Sample

Introduction to Human-Computer Interaction Assignment Sample

Part 1: User Persona and High-Fidelity Prototype

1. Introduction

This project aims to create a user-friendly mobile app that helps users find the cheapest petrol station nearby, as stated in the COM5009 Human-Computer Interaction (HCI) module. The app, which is called FuelFinder, is designed for drivers who want to quickly locate and compare fuel prices nearby using GPS and live data. A user persona is made detailed and two realistic task flows with high-fidelity prototypes are also included in the chosen approach. User-centered design, making it simple and ensuring it is responsive are all important aspects to make the interface easy for users to understand.

2. User Persona

A sales representative named Rachel Khan, who is 34 years old, lives in Birmingham, UK. She has to drive across the Midlands a lot for her jobs and she usually travels over 1,200 miles each month. Rachel seeks ways to save both time and money since she has a lot going on and two small children at home. She wants to get the cheapest gas, but she doesn't want to drive a lot or get lost in new areas. She would like to get accurate real-time fuel prices for her convenience.

Rachel is good at being practical, organised and confident when using mobile apps for her job and when she travels. But, she becomes annoyed when apps look messy, are too slow or ask for private details that aren't necessary. She finds simple screens with limited information are the easiest for her to process. Apps with a lot of extra features or confusing designs require extra time that she cannot spare. Being an extroverted person at work makes things easier for her, but she continues to prefer order and structure.

Since Rachel represents a typical and accessible user group, she was chosen as the representative: she uses her car daily and wants tools that make managing her finances easier (Karolita et al., 2023). How she used the app led to the selection of certain design features for both the user flows. Her quote, “Fuel shouldn’t cost me time AND money. I just want the best deal, fast,” captures the central design goal of this petrol-finding application.

This Human-Computer Interaction Assignment Sample focuses on designing “FuelFinder”, a mobile app that helps drivers locate nearby petrol stations and compare real-time fuel prices. An Assignment helper can support students in understanding user personas, task flows, high-fidelity prototypes, and user-centred interface design principles.

3. Task Flow 1: Locate the Cheapest Nearby Petrol Station

a. Task Description

In this task, Rachel will use their current location to find the closest petrol station offering the cheapest petrol. Because Rachel travels a lot to new places, she depends on the latest fuel prices to control her spending. An interface with few steps without the need to scroll a lot or apply multiple filters is her preferred choice. It is expected that GPS in the app will help her see nearby petrol stations, pick the best one and guide her to save money. The objective here is to complete these steps in very few interactions to fit Rachel’s fast lifestyle.

b. Screen-by-Screen Narrative

Welcome Screen

When the user opens the app, they see a simple welcome screen with the logo and a message telling them that the app is seeking nearby stations with the cheapest petrol. For a short moment, this screen informs that application is using the location services to get GPS data. The presence of a loading animation tells the user that the app is still processing (Miller, 2021). This strong start sets up a fast and fluid way for users to interact with the company.

Map View

As soon as the location is found, the user has displayed a map centered on them and where they are is identified by a green "You are here" icon. Red dots appear on the map for each gas station and the price of their fuel is listed above each one. Rachel can zoom in, move the map and touch on station icons to get simple information on the stations. There is a button at the bottom that allows to see items in the list view if user’s like. Seeing the map lets her see where the fuel stations are located close to her in a visual way (Hoggenmüller et al., 2021).

Station List

If the user presses the "List View" button, they can see a scrollable list of nearby stations arranged by the price they charge. For each petrol station, the entry has its name, how far it is, how much it costs per litre and the brand it supplies. This belief works well for people who like reading over looking at screens and for those who want things fast. The list view works alongside the map, letting user compare more specific details from each entry (Errity, 2024).

Station Details

After making a selection on the list or the map, Rachel sees a screen with all the information about that station. This should show the address, costs broken down by each fuel type, the shop's hours and what services are there such as air pumps and stores. There is a big, clearly marked "Navigate Now" button at the bottom so the next step is easy and obvious.

Navigation Screen

The route preview appearing on the last screen provides a time of arrival, the distance needed to get to the station and the amount of fuel saved. This builds up Rachel's confidence to go on. Once she has done this, she can use her preferred app for navigation (Xu et al., 2021). Things end well, as Rachel is on the cheapest route, knows all the details and doesn't feel stressed.

4. Task Flow 2: Plan a Trip and Find Cheapest Petrol on Route

a. Task Description

The purpose of this task is for the user to finalize a route and figure out where they will get the best petrol price. This feature helps Rachel a lot when she has to meet clients far from her office. Instead of searching on her own or filling up at a far station, she would prefer the app to recommend places that give her the best price. The objective is to merge planning routes with learning fuel prices so Rachel can spend less and arrive on time. Planning helps user to be prepared and lowers the anxiety on extended trips.

b. Screen-by-Screen Narrative

Home Menu

The main screen is created to guide users easily through a few simple choices. When she looks, Rachel sees there are three buttons: "Find nearby Fuel," "Plan Trip," and "View History." "Plan Trip" was selected by her to launch the trip planning tool. The interface is organized well and clearly labelled, so initiating tasks is simple and easy (Xin et al., 2024). The element positions users to take action and reach their goals fast.

Enter Destination

On the destination screen, Rachel is able to look up her address on the search bar or pick past destinations that were saved. She uses the drop-down to select the type of car which helps the app pick petrol stations that offer the right kind of fuel. After inputting her destination, the app sets out to calculate the path. Because of this screen, Rachel can tailor her journey and set up important route details from the beginning (Shi et al., 2023).

Map Overlay with Stops

The map shows the route and highlights petrol stations as user go. The least expensive station is outlined in green and the other close ones are outlined in orange. Every station's icon displays the cost per litre now. Rachel can sweep across the map to see nearby stations and tapping on one brings up the distance from the route and how much longer it would take (Alzubi et al., 2025). Rachel can compare different areas on the map without the need to go to another screen.

Station Details on Route

Upon selecting any station, Rachel gets all the necessary details on a special screen: name of the station, how much it will cost her, the length of the detour, available fare types and what people have said about it in their review (Ávila Muñoz et al., 2021) s. The app also shows how much more user can save by using that station instead of others. An easily visible “Add Stop” button tells her she made the right choice. Having this screen allows managers to make wise choices using real cost-benefit figures (Karahasanović and Culén, 2022).

Trip Summary

The last screen shows Rachel a map with her complete journey, including the fuel stop she picked. The estimation shows the total time needed to drive, the extra time spent on the fuel stop and the amount user might save. The process is finalised with the “Start Trip” button. After looking into her choices, Rachel is sure that she has picked the most effective fuel.

5. Design Rationale and Visual Consistency

User interfaces for these tasks were put together with a common strategy that focused on simplicity, clarity and efficiency. Each page was arranged vertically in clear sections which made it simple for users to find and use content on their phones (Long et al., 2024). Having big buttons, easy-to-read text and clear pictures in the app allowed it to stay accessible anytime, no matter where the user went. Similar colours and fonts appeared throughout the flows to make sure users felt familiar and found things easy to remember. Buttons, maps and list views were put where users expect to find them (Rapp, 2021). The design themes were repeated for both station names and the navigation, making the whole app easy to read. The user interface on phones was designed with areas easy for the thumb to reach and only needed minimal typing. Because of these design choices, the app was easy and logical for Rachel to use every day, even while travelling.

6. Conclusion

The app was designed using a user-centered approach which focused on what Rachel Khan would need and want from the app. Both of these task flows were set up thoughtfully to make them easier to handle, save time and present data simply. Using the interface is straightforward because menus are always consistent, there are only a few steps and actions feel natural for mobile users. The features that Rachel looks for such as real-time fuel info and simple navigation, make the app a useful way to drive every day. It ensures the app is useful for the user as well as enjoyable.

Part 2: Justification of Design Decisions

1. Introduction

The prototypes for FuelFinder were created by considering Rachel Khan's persona and a user-centered strategy. Decisions about the design were chosen to assist users with their needs and dissatisfactions, mainly related to economy, speed and user-friendliness. In this section, both flows are explained using important guidelines from human-computer interaction (HCI), usability heuristics and best practices for mobile design. The reasoning connects different interface elements to well-known rules made by Norman, Nielsen and Shneiderman.

2. Layout and Navigation Strategy

All the information in FuelFinder’s app is displayed in a vertical card layout which keeps spaces neat and is portable with any phone. With each screen, only one task or choice is offered which follows Norman’s advice to avoid complicating how people think (Benaida, 2023). It allows users to pay attention to just one thing at a time which reduces mental effort. Among its main choices on the home menu, Rachel is shown “Find Nearby Fuel,” “Plan Your Trip,” and “View Your History”. (Figure 7) They are given space from one another to keep things organized and clean.

Moving around the app is very straightforward and the gestures can be use to back between screens. It helps meet Shneiderman’s “Consistency” rule, so users can get to know the interface more simply. Using big buttons, obvious headings and repeated patterns makes it easier for users to remember Nielsen’s heuristic (Cho et al., 2022). Rachel does not have to keep track of where different menu items appear; the choices are always at the same spot.

3. Visual Hierarchy and Information Grouping

Information was arranged on the screen by colour, spacing and the use of typography, so users found everything easy to notice and use. Buttons such as “Navigate” and “Start Trip” (Figure 5, 11) are highlighted in bold blue and green so that users notice them. Information like opening times and detour lengths is usually put further down and in smaller type than the top details (Fernández and Macías, 2021). This lets Rachel quickly spot the important data necessary for her work.

Placing fuel prices, what the station offers and its location together in the “Station Details” (Figure 5) section follows the Gestalt principle of proximity. It allows Rachel to see and decide between several options without going through multiple screens. A card-based format for station lists makes it quicker for the user to understand and access the information which is useful when travelling during a crisis.

4. Use of Maps and Interactive Elements

Dialogues with users include maps which support real-time interactions based on their positions. Task Flow 1 has Rachel's location shown with a green pin and a group of stations with red pins and their prices visible (Figure 3). The buttons here reflect Norman's principle of affordance by showing what each button can do (like fueling car). Because of the Map Symbols and Zoom features, the information on the site can be easily matched to the real world.

On Task Flow 2, the route guide comes with a blue line for path and icons labelled with colour codes (Figure 9). Green means the least expensive and orange means user’s next nearest pick. It gives helpful visual information to support decision-making when making routes. Using the map, users can pan, zoom and choose stations, which fit within Nielsen's heuristic about giving users control and freedom (Figure 8). Maps clearly show price differences so user don't have to search for information (Bouraghi et al., 2022).

5. Data Presentation and Labeling

The way data appears in FuelFinder is guided by Norman’s visibility principle and Nielsen’s visibility of system status heuristic. As an example, in the Station List view, prices appear in bold and big letters together with station names and the distance. So, Rachel can quickly review what values are important to her. Every ticket also gets a label such as Cheapest or On Route which follows usability by giving context and removing confusion.

All interaction labels are written in simple English according to the guidelines to write as if talking to users. To make operations simple, the app prefers saying "Add Stop," "Navigate Now," and "Start Trip" (Figure 10, 11)instead of using technical terms. To make the site simpler, awards are now shown in tooltips and the price is coded by colour. Because of these details, Rachel can make quick but sensible choices even when she's busy or in a moving vehicle.

6. Accessibility and Mobile UX Considerations

Consideration was given to screen size, the limits of tapping with a finger and the benefit of using the app with one hand when developing the FuelFinder app prototype. Every interactive zone is large enough so as not to be accidentally pressed. It adapts its interface layout according to mobile guidelines from Apple and Google. Due attention was paid to colour contrast since this benefits people in bright settings and those with mild visual challenges (Galavi et al., 2024).

It can be seen that Rachel regularly operates the car infotainment system when she is not driving by using it while parked or getting ready for the journey. That is why the “Enter Destination” field is made large, center-aligned and can be completed by the system. They are based on human-computer interaction ideas that avoid mistakes and speed up what people do. Having real-time updates about her route and fuel savings makes the HCI concept of being aware and guided more effective which helps Rachel make fewer mistakes during use.

7. Consistency across Both Task Flows

There was consistency in the way things looked, were organized and how they were called in both task flows. The interface, card structures, icons and style of buttons are unchanged no matter if Rachel is getting fuel or planning her journey. This encourages learning and trust since users are comfortable trying every feature without needing to relearn how to use them. Confirmation buttons are always in the same place and use the same colour (Soure et al., 2021). When repeated, these elements match the “strive for consistency” idea from Shneiderman and cut down on how much someone thinks about them in different places. With this design, users don’t get lost when they are switching from one task to another.

8. Conclusion

Wide user needs were considered and HCI guidelines were followed in the design of FuelFinder. All the screen details, including design, navigation, interactive maps and data presentation, were picked with Rachel Khan’s desire to save money and time in mind. Because Norman’s principles, Nielsen’s heuristics and mobile UX standards were followed, the prototype provides users with a smooth, efficient and straightforward experience. The loving craftsmen have shown the importance of using design based on research and users’ needs to make successful mobile applications.

Part 3: Test and Evaluation of Design

1. Introduction to Evaluation Methods

Assessing a user interface is a vital stage in human-computer interaction (HCI). It helps guarantee the design is simple to use, is accessible and delivers results for actual users. For this part, the FuelFinder prototype was tested using Nielsen’s heuristics and also a think-aloud test with two participants. Nielsen’s principles are standard ways for finding usability issues in a design. The method shows designers how users really respond to a product as they use it, pointing out issues that could be hard to see. Using them together gave a good understanding of the prototype’s strengths and what still needed improvement.

2. Usability Heuristic Evaluation

Heuristic	Screen Evaluated	Observation	Recommendation
Visibility of system status	Navigation screen (Task Flow 1)	ETA, savings, and traffic level are displayed, making the route easy to interpret.	Maintain this informative display in future versions.
Match between system and real-world	Station list (Task Flow 1)	The use of brand names and pricing reflects real-world expectations.	Consider adding nearby landmarks for stronger context.
User control and freedom	Trip summary (Task Flow 2)	The screen moves the user directly to trip confirmation without options to revise details.	Include a "Back" or "Edit Trip" button for flexibility.
Consistency and standards	Buttons and navigation across screens	Consistent use of button size, colour, and placement helps create a unified experience.	Continue this design approach to support learnability.
Error prevention	Destination input (Task Flow 2)	The interface currently does not indicate invalid or incomplete input.	Add real-time input validation or location suggestions.
Recognition rather than recall	Map overlay with stops (Task Flow 2)	Colour-coded pins are intuitive but not yet labelled for immediate recognition.	Add a simple key or tooltip to explain pin colours.
Aesthetic and minimalist design	Welcome screen and map screens	The layout is clean, uncluttered, and focused on the user’s primary task.	No immediate changes are required. Keep a minimal design philosophy.

To find issues in user interface design, people often rely on Nielsen’s ten usability heuristics. They are used to check if a system meets established usability standards. The app was reviewed using seven of the ten heuristics, one for each task flow (1 for looking for a cheap petrol station in the area and 1 for planning a route and finding the cheapest gas). These findings are summarised in the above table along with the recommendations that result from them (O'Brien and Wilson, 2023).

2.1 Usability Heuristic Analysis Table

Assessment indicates that this app adheres to a lot of usability standards, but still needs to make a few changes like notifying users better about errors and letting them check their trip details. These findings are derived from analyzing the heuristic theory and watching the behaviour in real user tests.

3. Think-Aloud Usability Test

3.1 Testing Setup

To learn about the real user experience with the prototype, a think-aloud test was done using two people. The users were both in their early thirties, had a car and often used navigation applications on their phones. A private room was used for testing and printouts of Figma screens were used on A4 paper. Explaining the aim of the task, I had users state aloud what they were thinking, feeling or attempting to do as they carried out each exercise. I started by showing all the screens as the user made picks and then advanced through the menu items.

3.2 Tasks Performed by Participants

Everyone taking part in the study had to do both task flows. At first, they had to use both the map and the list on the app to find the cheapest place to fill up their tank. Each person used five screens in total for both tasks which were designed in the prototype (Fan et al., 2021). The aim was to find out how they reacted to what they saw on the screens, what decisions they made and if they got confused or hesitated along the way.

3.3 Observations and User Feedback

Task Flow 1 was handled smoothly by both users and they reported loving the map with the "You are here" feature as well as the fuel price pins. Nevertheless, one participant didn't know what the coloured pins meant until they started using them which suggests including a coloured legend may help people understand. Users are able to identify the cars that both users selected, showing the comparison is useful. Even so, in Task Flow 2, destination entry went smoothly, except one participant erroneously selected a location and got no error notification. users liked the station details page, especially for viewing both the savings and detour time. Both participants mentioned that the ability to change the trip summary was missing.

4. Key Findings and Analysis

Evaluating the prototype, it was clear that it was both usable and designed. The main advantages were the organized layout, easy-to-use navigation and easy pricing. The flow was clear to users and they made their decisions easily using few guidelines. But there are still some parts that could use upgrading. Not being able to see any error messages in the field for the destination and the lack of an option to go back in the summary were both difficult to deal with. Icon colours were another part that needed more explanation. Minor adjustments to the interface can fix these problems, no major rebuild is needed (Murmanto et al., 2022). They recommend doing heuristic evaluation together with real user testing to discover all issues, from those user can see to those that can't be noticed at first.

5. Recommendations for Improvement

According to the test data, here are some recommendations. First, checking for errors should take place in the destination input, so the user is told if the place they put in is not correct or is missing parts. Doing this would keep users from getting confused and end their confusion. In addition, the trip summary page ought to have a "Back" or "Edit Trip" button so that users can go back or fix their travel plans without having to start all over. Include a basic guide to colours showing green and orange fuel pins around the screen (Soure et al., 2021). As a result, the clarity, control and reduction of errors won't make the app any less simple or slow.

6. Conclusion

The FuelFinder prototype was checked with Nielsen's heuristics and tested by think-aloud methods which showed us what is strong and weak about its design. Many people thought that the platform was easy to use and fast and it met their expectations. Nevertheless, some key areas like user control, handling errors properly and visual support should be improved. Although some of these improvements may not seem big, they help Rachel use the app with ease. Usability testing has shown that a well-designed interface can be even better with feedback and updates, which is why this stage is necessary in the HCI design process.

Read Our Last Sample: Understanding the Entrepreneurial Spirit Assignment Sample

References

Journals

• Alzubi, T.M., Alzubi, J.A., Singh, A., Alzubi, O.A. and Subramanian, M., 2025. A multimodal human-computer interaction for smart learning system. International Journal of Human–Computer Interaction, 41(3), pp.1718-1728.
• Ávila Muñoz, R., Clemente Mediavilla, J. and Perez-Luque, M.J., 2021. Communicative functions in human-computer Interface design: A taxonomy of functional animation. Review of Communication Research (RCR), 9, p.120.
• Benaida, M., 2023. Developing and extending usability heuristics evaluation for user interface design via AHP. Soft Computing, 27(14), pp.9693-9707.
• Bouraghi, H., Rezayi, S., Amirazodi, S., Nabovati, E. and Saeedi, S., 2022. Evaluating the usability of a national health information system with heuristic method. Journal of Education and Health Promotion, 11(1), p.182.
• Cho, H., Keenan, G., Madandola, O.O., Dos Santos, F.C., Macieira, T.G., Bjarnadottir, R.I., Priola, K.J. and Lopez, K.D., 2022. Assessing the usability of a clinical decision support system: heuristic evaluation. JMIR human factors, 9(2), p.e31758.
• Errity, A., 2024. Human–computer interaction. In An Introduction to Cyberpsychology (pp. 305-322). Routledge.
• Fan, M., Zhao, Q. and Tibdewal, V., 2021, May. Older adults’ think-aloud verbalizations and speech features for identifying user experience problems. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (pp. 1-13).
• Fernández, J. and Macías, J.A., 2021, September. Heuristic-based usability evaluation support: A systematic literature review and comparative study. In Proceedings of the XXI international conference on human computer interaction (pp. 1-9).
• Fernández, J. and Macías, J.A., 2021, September. Heuristic-based usability evaluation support: A systematic literature review and comparative study. In Proceedings of the XXI international conference on human computer interaction (pp. 1-9).
• Galavi, Z., Norouzi, S. and Khajouei, R., 2024. Heuristics used for evaluating the usability of mobile health applications: a systematic literature review. Digital Health, 10, p.20552076241253539.
• Hoggenmüller, M., Tomitsch, M., Hespanhol, L., Tran, T.T.M., Worrall, S. and Nebot, E., 2021, May. Context-based interface prototyping: Understanding the effect of prototype representation on user feedback. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (pp. 1-14).
• Karahasanović, A. and Culén, A.L., 2022. Project-based learning in human–computer interaction: a service‐dominant logic approach. Interactive Technology and Smart Education, 20(1), pp.122-141.
• Karolita, D., McIntosh, J., Kanij, T., Grundy, J. and Obie, H.O., 2023. Use of personas in Requirements Engineering: A systematic mapping study. Information and Software Technology, 162, p.107264.
• Long, L.I.N.G., Xinyi, C.H.E.N., Ruoyu, W.E.N., Toby Jia-Jun, L.I. and Ray, L.C., 2024. Sketchar: supporting character design and illustration prototyping using generative AI. Proceedings of the ACM on Human-Computer Interaction, 8(CHI PLAY), p.337.
• Miller, D., 2021. The best practice of teach computer science students to use paper prototyping. International Journal of Technology Innovation and Management (IJTIM), 1(2), pp.42-63.
• Murmanto, I.R., Kamilia, R.M., Yusuf, G.M. and Kurniawan, R., 2022, December. User Experience Evaluation of IT Support Mobile Application Using System Usability Scale (SUS) and Retrospective Think Aloud (RTA). In 2022 Seventh International Conference on Informatics and Computing (ICIC) (pp. 01-08). IEEE.