Lecture 31 - Wireframing

Lecture Date: Friday, November 3

As I will be attending the Intermediate Honors ceremony, we will not be having class today.

In its place, you need to create a digital wireframe of your final project app. Please upload a PDF copy to the root of your final project repository AND each partner should submit a copy to the appropriate assignment in Collab.

You can use whatever digital tools you would like to create the wireframe. There are dedicated wireframing tools available out there - some free, some pay. You are welcome to explore these options, or use something else, such as Photoshop.

Some of the ones I like are:

You MUST use some digital tool to create your wireframes. Hand drawing it and then taking a picture is not acceptable.

Submissions are due before class begins on Monday morning, where we will discuss some of your wireframes.

No Audio Today

more ...

Lecture 30 - Wireframing

Lecture Date: Wednesday, November 1

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!

more ...



Lecture 27 - Android Material Guidelines

Lecture Date: Wednesday, October 25

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 26 - Accessibility

Lecture Date: Monday, October 23

We will start by finishing up the example screens from the last class.

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)

Perceivable

  • 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.

Operable

  • 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.

Understandable

  • 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)

Robust

  • 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 25 - UI Design

Lecture Date: Friday, October 20

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 23 - Sensor Ethics

Lecture Date: Monday, October 16

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: Friday, October 13

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)
  • Web Services / Service Oriented Architecture

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 ...