DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Using Prototypes to Improve UI Design

Henry Mark user avatar by
Henry Mark
·
Aug. 14, 09 · Interview
Like (0)
Save
Tweet
Share
10.82K Views

Join the DZone community and get the full member experience.

Join For Free


When we design an application for desktop, Web, or mobile, an important consideration to make is the user experience (UX). To achieve better UX, we need to design the user interface (UI) very carefully. UI is not only the way we layout and paint the widgets of our application, but also includes the interaction design (IxD).

There are some principles to designing a good UI; we can find books and learn them. But in practice, especially on a big project, we will find it difficult to reach every aspect of a matter. The UI becomes complex and we just can't easily figure out which design is more user-friendly. So what to do? The straightforward solution may be asking our users. We make applications for them and care about their experience, so why not listen to them?

Collecting feedback from users is a good way to improve design. The problem is when and how to gather feedback. The earlier we do, the less costly any modifications will be. The alpha version may be the first version that users can try, but it is always too late for collecting feedback to change the design.

Too late to get feedback

 Figure 1 Too late to get feedback


How to make the best of both worlds? It takes little time to create a prototype of the final application, deliver it to users and collect feedback from them. This can be done at very early phase so the cost to change the design will be quite low.

Static vs. Interactive Prototype


Prototypes can be static or interactive, and each type works differently. A static prototype usually contains several static figures. Each figure has the sketch of the application UI. Although the figures can have some comments, users can not understand them very well without Help files. So static prototype it is more suitable for face-to-face situations.  We can show users the figure and let them make their "operation", then we tell them the result. Users can give comments anytime and we can write the comments on the figure.

Use Sttic Prototype

Figure 2 Use Static Prototype

If we want to collect feedback from a large number of users, static prototype seems not so suitable; communication becomes difficult when there are more than 5 people in the room. If we have an interactive prototype, which can be run on each user's machine, users can really operate on it and give us their feedback.
Use Interactive Prototype

Figure 3 Use Interactive Prototype


We can create the runnable prototype with programming language, or with specialized tools.

Prototype Fidelity
According to the details included in the prototype, we can breakdown prototypes into three categories:

  • high-fidelity (hi-fi) prototype
  • medium-fidelity (mid-fi) prototype
  • low-fidelity (lo-fi) prototype.

Here are some prototypes for a video downloader, with different fidelities:


Low Fidelity Prototype (Sketch)

Low Fidelity Prototype

Figure 4 Low-Fidelity Prototype

Medium Fidelity Prototype (Clean Wireframe)
Medium Fidelity Prototype

Figure 5 Medium Fidelity Prototype

High Fidelity Prototype (Windows style)
High Fidelity Prototype

Figure 6 High-Fidelity Prototype

Prototypes with lower fidelity can force the audience to concentrate on the solution itself, and encourage the suggestion to make big changes, so it is very useful to collect feedback from users at a very early phase. Prototypes with higher fidelity provide a GUI that is closer to the final result, so it can be used in design document and help developers to build the application. What's more, if a hi-fi prototype is interactive too; it can provide the user with a very real experience, so that we can do the usability testing on it.

Prototyping Tool
The most common tool for prototyping is paper-and-pencil,; it’s good for creating a sketch, and helps organize ideas. But paper prototypes are hard to store and manage. What's more, paper-and-pencil can not create a prototype with higher fidelity.

With the help of specialized tools, we can create better prototypes with less effort. Recently I’ve been evaluating a new tool named ForeUI; it is very interesting since it can switch the fidelity of prototypes, and it can create interactive prototypes too.

ForeUI Prototyping Tool

Figure 7 ForeUI Prototyping Tool

Switching the fidelity is a very good feature that allows using the same UI design for different purposes. I will write a detailed review for this tool later.

Summary
Collecting feedback from users is very important for UI design. It should be done with prototype at a very early phase. Specialized tools can help reduce the workload to create prototypes.

 

Prototype Interaction design

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Are the Benefits of Java Module With Example
  • A Beginner's Guide to Infrastructure as Code
  • Kubernetes-Native Development With Quarkus and Eclipse JKube
  • 19 Most Common OpenSSL Commands for 2023

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: