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.
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.
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!
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)
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!
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:
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?