Practical Application for Software Engineering: User Interface Design

Instructor: Scott Tuning

Scott has been a faculty member in higher education for over 10 years. He holds an MBA in Management, an MA in counseling, and an M.Div. in Academic Biblical Studies.

Because software engineers have a highly technical skill set, it can be difficult for them to understand their system from a non-technical point of view. To overcome this challenge, engineers can design user interfaces that are user-friendly.

Designing User-Friendly Interfaces

Take a look at the image below and determine which interface you would like to work with. Which screenshot is more visually appealing? Which one is easier to understand and navigate? Which one would be easier to teach a customer to use?

If you were teaching someone how to use an application, which one would be easier to explain to a non-technological user? Why?
DOS and Windows

Developing the User Interface Step-by-Step

Imagine that you are a developer who is deploying a new self-checkout kiosk system that will be used in grocery stores and big box retailers. What are your primary concerns, and what are the priorities in your design?

Step 1: Map the Overall Workflow

To create a great user interface, you'll start by making sure that the end goal of the process is clear. As a developer, you know that keeping the end of a workflow in mind is critical to success. With that in mind, you create the following high-level workflow:

Your overall process map looks something like this.
High Level Workflow

Step 2: Select a Model That Minimizes Clicks and Stops

At a minimum, you'll probably want to pay careful attention to things like:

  • The number of touches or clicks required to navigate from point A to point B
  • The size, style, and color of text and other objects on the screen
  • The nature of error messages and other dialog boxes that pop up while a user is in the system
  • The total amount of time it takes for a user to complete the workflow they are engaging

Take a look at a few of these examples in action before you actually begin designing your user interface. You would probably want to use a sketch like this before refining it on to a formal diagram:

As you design your user interface, pay attention to click counts and stops. Reduce both as much as possible.
Click Reduction

As you look at the two hand-drawn pathways you've come up with, you'll quickly realize which one is the more efficient user experience. Interface A does not require a user to click anything, nor are they presented with a ''stop'' that must be addressed before continuing. On the other hand, interface B requires that a customer engage three clicks and clear three dialogue box stops before reaching the end of the workflow. Which interface do you want to continue working with?

Step 3: Exception Handling

As a developer, you've done your homework. You know that users of self-checkout kiosks often face the same set of exceptions. You will, of course, consider these exceptions and the workflow required to clear them. After watching users interact with other kiosks, you identify that your interface must deal with these exceptions:

  • Age-restricted purchases (alcohol, tobacco products, spray paint, etc.)
  • Very large or heavy items that cannot be scanned (50 lbs of dogfood, boxes of copy paper, pallets of bottled water, etc.)
  • Items without bar codes (produce, bags of ice, fresh baked goods, etc.)

As you design your user interface, you'll want to map out what sub-process needs to take place when an exception occurs. Because a user is only one part of the exception handling process, your design document will now include swim lanes. Swim lanes are very helpful when multiple users need to see a unique interface for their role. Your swim lane-enhanced process now looks like this:

To unlock this lesson you must be a Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use

Become a member and start learning now.
Become a Member  Back
What teachers are saying about
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account