Application Design Task 3

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Application Design. Task 3 (Week 10-12)

---

Instruction:

---

Lecture:

Week 11:

What it is: Usability testing evaluates products or services by observing representative users as they complete specific tasks. Observers take notes to identify usability issues, gather qualitative insights, and measure user satisfaction. Unlike questionnaires, it provides in-depth feedback from a smaller sample size.

How to conduct it (6 steps):

1. Prepare a low-fidelity prototype
2. Recruit 3 participants and assign each one a scenario
3. Define three user scenarios with written instructions
4. Develop a task list for participants to complete
5. Conduct testing via Zoom and share the Figma link
6. Gather feedback using prepared questions, then use insights to improve wireframes

UI Kit

What it is: A pre-packaged collection of all UI components for apps or websites. UI kits save time by providing ready-made design elements that can be customized rather than built from scratch. They're particularly useful for niche-specific applications (like e-commerce) where similar interfaces are expected.

Key components of a UI Kit:

• Typography: Font selection, sizes, and weights that establish hierarchy and brand consistency
• Color palette: Consistent color scheme throughout the product
• Iconography: Paired with typography to clarify element functions
• Components and Layouts: How elements look when combined (e.g., modals with text fields and buttons)
• Grids: Standardized layouts that prevent components from appearing jumpy between pages

Week 12:

The 10 Usability Heuristics

1. Visibility of System Status: Systems should keep users informed through timely feedback. Users need to see what's happening—think progress bars, confirmation messages, and navigation cues that show where they are.

2. Match Between System and the Real World: Interfaces should use familiar concepts and language. This includes visual metaphors (like a trash can icon for delete) and avoiding technical jargon in favor of everyday terms users understand.

3. User Control and Freedom: Users need the ability to undo actions and navigate freely. Always provide back buttons that work as expected, cancel options, and ways to reverse decisions without starting over.

4. Consistency and Standards: Maintain uniformity in visual design, functionality, and feedback throughout the interface. Buttons should look and behave the same way across all screens.

5. Error Prevention: Design to reduce mistakes through clear instructions, confirmation prompts before irreversible actions, and real-time validation of user inputs.

6. Recognition Rather than Recall: Make information visible rather than requiring users to remember it. Use clear menus, show browsing history, and allow favorites to minimize cognitive load.

7. Flexibility and Efficiency of Use: Support both novice and expert users through customization options, keyboard shortcuts, and interfaces that adapt to different skill levels.

8. Aesthetic and Minimalist Design: Keep designs simple and focused. Use only essential elements, maintain visual hierarchy, incorporate whitespace effectively, and stick to consistent typography and colors.

9. Help Users Recognize, Diagnose, and Recover from Errors: When errors occur, provide clear messages explaining what went wrong, use visual cues to highlight problems, and offer step-by-step guidance for recovery.

10. Help and Documentation: Provide contextual help, user guides, searchable knowledge bases, and access to support resources so users can find answers when needed.

Visual Design Elements

Basic Elements:

• Line, Shape, Form
• Color
• Texture
• Space
• Shadow

UI Components:

Button

Height: Keep between 40pt and 60pt, never below 40pt

Primary buttons: Main call-to-action

Secondary buttons: Often appear in forms next to primary buttons for going back or editing. Shouldn't appear on the first step of a form

Tertiary buttons: For less critical actions users aren't actively seeking (share, add to favorites)

Icons:

Should be contained in a bounding box (usually 24x24pt)

Choose width and weight that are closest to each other for consistency

Can be paired with text even though they're meant to replace it

Use consistent style throughout

Photos:

Use overlays when placing text on photos

Choose images with a single focal point

Maintain consistency across images using color overlays

Position images to "lead" users toward important elements like forms or buttons

Illustration:

Useful for onboarding and landing pages

Resources mentioned: storyset.com, icons8.com/ouch, streamlineicons.com, storytale.io

Cards:

Think of them as shorter versions of full pages

Include only the most important content from the full page

White Space:

Creates focus on content

Let's elements breathe, improving legibility and comprehension

Navigational Components:

Search Bar: Single-line text input for finding information

Breadcrumb: Shows the path to current user location

Pagination: Navigation through multiple pages

Slider: Sets values or ranges, functions as filters or shows progress, typically horizontal

Tags: Lowest level of hierarchy for finding content, can be color-coded

Carousel: For skimming items, showcasing multiple items, efficient use of space, used for onboarding, product features, or collections

UI Controls

• Dropdown: For selection from single or multiple options, can include images
• Radio button: For selection when only one option is allowed
• Checkbox: Vertical arrangement for multiple selections
• Toggle: Select between 2 states, one state always required
• Date and Time picker: Calendar dropdown for selecting dates and times

---

Task 3

To begin this task, we need to make a sketch about our app. The sketches should be simple and just serve as a reference for our lo-fi prototype.

After I've done my sketches, now I can move to find a visual reference on pinterest. We need to find a visual reference so we can copy the elements that we like from our visual reference.

And after I've found my visual reference, I can finally move on to the figma part. This part was quite fun and challenging at the same time, because althought I have used figma before, I have never used figma to create a prototype mobile

application. Below are my progress of creating the prototype.

After I've created all of the pages of the app, I can move on to linking the buttons and the navigation of the prototype. This process was quite simple, all we needed to do was convert the button into the elements and then change the settings on what the button do. And below are the final outcome.

Next, We need to do a usability testing for this part we need to find 3 participants and then we need to give them 3 task per participants, And below are the links to the usability testing video.

Google Drive Link

After the usability testing, We need to evaluate the feedback and our plan for the final Hi-Fi prototype, and for that I've compiled everything into the canva slides, below are the final canva slides.

App Design Task 3 by ERIC CHANG