Lecture 30 - Wireframing

Lecture Date: Wednesday, November 7

Today we will keep working on the movie theater wireframes and will talk about your design decisions as we share the diagrams with the class.

No Audio Today

more ...

Lecture 29 - Wireframing

Lecture Date: Monday, November 5

Now that we have looked at some user interfaces, we're going to discuss how to start making our own.

How do we go about coming up with an interface wireframe?

Make sure to have read the reading for today from developer.android.com!

Step 1. Define the use cases

How are users going to be using your app? What will they want to do? Come up with a list!

Step 2. Create a screen list

Based on the features above, come up with a screen for each feature.

Step 3. Refactor the screens

Now that you have the screens, how can you reorganize or revise them to combine similar features, link things together, etc.

Step 4. Figure out the screen relationships

Which screens are "siblings," in that they appear on the same tab bar and users can flip between them? Which screens are parent/child, such as a list of items and then the details of a particular item? Decide on these relationships and map them out!

Step 5. Plan your navigation and transitions

Where do you have "lateral" navigation between sibling screens? Where do you have "descendent" navigation to child screens? How will you make these transitions? Lay them out on your wireframe! Now, how do you go from one screen to the next? Tabs? Swipe left to right? A list of items? A button? How do you show your current state/location?

Step 6. Plan your reverse navigation

When do you want to go back a screen in the order you opened them, and when do you want to go "up a level" in your navigation tree? When is each appropriate? How do you know what the user wants? (i.e. temporal navigation vs. ancestral navigation)

Step 7. Draw it up!

Physical wireframes are great for getting your ideas down quickly! You can transfer to digital later too for more interactive designs to show clients.

Step "Should do this along the way"

Consider different screen sizes and orientations. You can repeat this process for each permutation as needed or you can do them as you go.

In-Class Activity

Today, you should work with a partner (anyone is fine) to draw a wireframe!

We are going to design an app for people to order food in a movie theater. Let's pretend that in this high-end theater you can order drinks, snacks, and meals right from your seat on your phone and a server will bring it to you. Consider a few things:

  • How would you show the menu?
  • How would you indicate where you are seated? (let's assume the theaters are relatively small and the seats are large with swing-up tables)
  • How would you pay? How would you give a tip?
  • How would the user do all this quickly without distracting people around them?

You can use your imagination to add features/constraints for your design. For instance, you might want to assume people purchased assigned seats in the theater or can link their ticket to the app.

Draw your app on the handouts provided and then you'll be called up front to share your designs!

Example Wireframes

more ...

Lecture 28 - Wireframe Activity

Lecture Date: Friday, November 2

Ahead of our discussion on Monday regarding how to do wireframes, I want you to take just a little bit of time to think about what a wireframe is and how they might be used. This is a simple "prep for lecture" kind of assignment.

Before lecture on Monday, you need to do the following and submit to the appropriate assignment in Collab:

  • Search online for two different examples of mobile app wireframes
  • Answer the following questions about the wireframes and submit 1 (ONE) PDF that has all the answers + images of the two wireframe examples you chose:
    • What are the reasons for doing a wireframe?
    • What does each wireframe you chose do well?
    • What does each need to improve?
    • Do you believe that you could implement each of these apps based upon the wireframe? Why or why not?
more ...

Lecture 25 - Android Material Guidelines

Lecture Date: Friday, October 26

The current set of Android design principles is called "Material". It's an all-encompassing metaphor for how different elements should be displayed and interact on the screen.

First, we'll look at what "Material" actually is:

We will spend most of our time looking at the individual components and patterns provided by Google.

Such as:

How do we apply it to our apps? Using Material Design - https://developer.android.com/training/material/get-started.html

And also, how do we support themes for different versions of Android? Supporting Themes - https://developer.android.com/guide/topics/ui/themes.html

Slides - Android UI

more ...

Lecture 24 - Accessibility

Lecture Date: Wednesday, October 24

Touch screen devices have some inherent issues when we consider people that may have limited sight or ability to touch the screen. How do we assist those people? What do the manufacturers do?

The criteria we look at for mobile is very similar to that of other mediums (desktop, laptop, web) because these realms crossover a great deal now:

  • Web sites often have a responsive design that changes for a mobile screen
  • Laptops now have touch screens
  • Laptops can run mobile OS
  • Some mobile devices have external input devices

To consider accessibility, we examine it in terms of four main principles:

  • Perceivable - Information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
  • Operable - User interface components and navigation must be operable. This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
  • Understandable - Information and the operation of user interface must be understandable. This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
  • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)


  • Screen size - Consider minimizing the amount of information on a screen. If you have a form or other input, position items vertically instead of horizontally.
  • Magnification - What will your app do if is zoomed it an the OS level? Can you reposition information? Make sure to use default OS settings for text sizes!
  • Contrast - Provide the capability to differentiate colors or ensure a proper contrast level.


  • Keyboard controls - Most mobile OSes allow for external keyboards, so make sure to allow for this as well. Don't do any extra on screen keyboards that are not OS related.
  • Touch target size and spacing - Space touch spots a reasonable distance apart. Specs recommend at least 9mm x 9mm touch targets.
  • Touch gestures - Allow for alternate mechanisms for touch gestures. Don't add in any excessively difficult gestures.
  • Button locations - Optimize for one hand, but consider both.


  • Orientation support - Some devices may be mounted due to the inability to hold the device. Support both orientation layouts.
  • Consistent design - All of your pages should look the same / follow the same design layout with consistent font sizing, buttons, etc.
  • "Above the fold" - Place important items at the top of a page, before the user has to scroll to get to them.
  • Group elements that perform the same action - Keep all your controls together to make it easier for screen readers, etc.
  • Indicate actionable items - Provide clear indication what can be interacted with (i.e. coloration, icons, location, etc)


  • Virtual keyboard specialization - Always set a keyboard to the most logical layout for the data coming in.
  • Easy data entry - Use specific widgets for data entry instead of text when appropriate.
  • Follow platform guidelines - Apps should look and play nice together.

Let's design a new version of our previous example apps!

more ...

Lecture 23 - UI Design

Lecture Date: Monday, October 22

We'll take today to start talking about how to build good, usable apps. You're working with limited screen real estate, a unique input system, and a device that's nearly constantly in motion. That adds up to a headache for UX design.

Some links we will reference for the next few days:

Slides - UI Design

more ...

Lecture 21 - Sensor Ethics

Lecture Date: Wednesday, October 17

Smartphones are marvelous devices. They have the capability to connect us in ways we never though possible just a few years ago. But can we go too far? Can all the data collection capabilities actually hurt us?

Slides - Sensor Ethics

more ...

Lecture 22 - Midterm Exam

Lecture Date: Monday, October 15

Midterm Exam day!

You will need to bring a (fully-charged) laptop to class today. You will be taking taking the test in Collab.

The exam will consist of five questions. Each should be answered with a reasonable sized paragraph, fully touching on all aspects of the question. Bullet lists will receive no credit.

The questions will roughly cover the main aspects of these topic areas:

  • Basic mobile architecture / MVC
  • Android architecture
  • iOS architecture
  • Data Management (the four concepts of storing data and how they work)
  • REST (the five aspects and how they work)
  • Using Web Services

There is no coding on the test. All questions are conceptual around the design and construction of mobile apps.

Tips for taking tests in Collab:

  1. Open the test in Collab and copy the questions out of Collab and into the document editor of your choice (Word, text editor, Google doc, whatever).
  2. Answer all the questions first in your document editor, saving as you go.
  3. Copy the plain text of your answers into the question boxes in Collab one at a time when you are ready to submit.
  4. Submit the test and keep your back up just in case something happens.
more ...