Application Design I: Task 3

-

29.6.2026 - 11.7.2026 / Week 11 - Week 12

Dave Christian Moniaga / 0385630

Application Design I / Bachelor of Design (Hons) in Creative Media

Task 3

Lectures

Week 11

Testing

Limits of testing

Not everything can be tested

aspects like long term impacts cannot be tested

It depends on the tester

the effectiveness depends on a tester's planning & observational skills

Tests take time

It is important to plan your tests. When you make things consistent & create standardized testing; same questions, same tests will result in better results from your tests

Your test needs to have a goal, a statement with specific objective & constraints. For example, "Users will be able to create a pickle ball event for people in under 6 minutes).

In-lab testing
Remote testing
Guerilla testing

Participants should be close to the real audience should be. Check the target group and find them through online methods, specific locations.

Some of the things to note during task

Tasks should be doable and realistic
They should focus on action-based tasks
Avoid guiding them during the tests
Prioritize with tasks that are important to the app

How to recruit?

Aim for participants that are close to your personas (can use participants from user reasearch)
3-5 participants are best at showing trends. *0% usability issues are usually found withing 5 users.

An example of the step-by-step of usability testing:

Brief the tester > Get their info > Give tasks > Observe > Ask follow up questions

We should let participants struggle. If participants are frustrated and ask questions during the test, revert the questions back to ask where they think some options should be instead.

"What do you think?"
"How would you go about it?"

Remember to ask questions after the test & be thankful.

Week 12

User Interface Visual Elements

Color is used for clarity and to attract viewer's attention. Contrast can bring highlights to buttons and elements.

Fig 1.1 Color used as highlight by famous apps

Forms need to have sequences that makes sense; which one to fill out and the order. Texture needs to still be easy to read whether its minimalistic / maximalist.

Space shouldn't feel limited, don't cram everything in one page. Space in an app shouldn't feel like you are fighting for add space.

Questions to ask when at each point in the app's navigation:

Where am I?
Where do I go?
What do I need to get there?

Design Principles

In terms of text, make it legible. For example, bigger text requires shorter space and text needs more space (make them easy to scan through). Same size of text are also easier to read and feel more as a group.

For color don't use purse white or pure black, very high contrast can be bad for viewer's eyes. But there also needs to be a balance for this as well, not enough contrast can also be bad for readability.

Fig 2. 60-30-10 rule

Use the 60-30-10 rule:

60% = the background
30% = text color
10% = primary colors (buttons)

Shadows are mainly used for interactability, such as buttons. (Figma's drop shadow is too harsh; you show tweak it for a better visual)

Buttons should also be easy to click. By highlighting them and also giving them enough space for users to click; best to keep the size 40-60pts, nothing below 40pts.

The buttons should also match the size of other elements. The words used in the buttons themselves should be accurate and not misleading.

All icons should also be inside a 24x24 bounding box (usually). Make sure the font and icons pair with each other in terms of width.

When using photos and texts, make sure the text can be readable based n the backdrop of the photo; either find a clean background photo or add a white gradient. Photos themselves should complement each other and look similar (can be achieved using color overlay). The content of images can also be used to lead viewer's eye.

Illustrations should be used as a way to enhance the text. The style also matters; you wouldn't use a vector illustration for an iPhone showcase.

Design your cards when designing your interface. Create one card in different template formats, having them as components will help when designing and changing things very quickly.

Important navigational component,

The Search Bar: important and needs to be present for text input information.
Breadcrumbs: a line path that shows current user location, nested information.

It gives users confidence as they will know where they are and what they are doing.

Pagination: visualized navigation through pages.
Sliders: to set values or range in a given set. it can also be your identity of what the app / kind of content is about.

function as filter
show progress

Tags: used to find content right away from lowest level of hierarchy
Icons: an alternative to text & buttons (but text should still be present as not everyone understand the same icon)
Carousel: to skim among items, make sure to show that it is able to be moved.

used to showcase multiple items.

Mobile specs:

element size: 44x44pts
font: 16px
consider heatmap, labels, keyboard slip-up
layout: readability, > 3 text block per column, >5 items per row

Dropdown: based on the info for selecting multiple options
Checkbox: made in vertical arrangement, make sure to have consistent spacing and hierarchy
Toggle: to select between two states.
Date & Time picker
Grids: create margin for consistent composition

Instructions

Task 3

Lo-Fi Prototype

A Lo-Fi prototype only requires black and white contrast that consists of around 3 shades. Important icons are needed but it does not require visuals.

For wireframes, use Poppins for titles and Inter for other texts. Some notable plugins to add are Iconify, which are used to add icons & Unsplash for royalty free images.

Fig 2.1 Figma Lo-fi class exercise

Usability Testing Objectives

"Find promotion details from the restaurant 'Bebek Goreng Pak Ndut'."
"Locate the restaurant 'Bebek Goreng Pak Ndut' using the map."
"Navigate the app and find your parked car"
"Check Activity Planner in your profile"

A few interview questions after usability testing:

How was it? Any comments about the experience?
Was locating the restaurant difficult?

Would you like more ways to access it?

What did you struggle with?

Any suggestions on what can help to improve this?

Was the map clear or are there any things needed
What features would you like to see?

Final Task 3 Ideation and Testing

Project Links:

Feedback

Week 12

About 1-2 objectives for the usability testing is enough. Focus on achieving and finding relevant data to improve the prototype itself. We can also add some non mandatory interview questions after testing to get some feedback.

Based on the lecturer's suggestion, I can also make minor adjustments to my prototype throughout the process of the usability testing if I have time and are able to record them.

Search This Blog

Dave Christian Moniaga (0385630)