Mobile Considerations and Interaction
- Due: July 24 (Wednesday) Review Quiz #5 on Blackboard
- Due: July 28 (Sunday) Week 4 Exercise । App Analysis and Concept Pitch
Unit Goals
- Recognize explicit connections between design decisions and user experience
- Apply concepts of interaction design as a form communication
- Consider the constraints of mobile interfaces
- Connect 'verbs' of interaction to interface and 'intention'
- Recognize the design considerations presented by mobile devices
Learning Resources
Key Term: Interaction Sequence
Read Ch. 25: Sequential Storyboards: Visually Illustrating an Interaction Sequence Over Time
Think of an interaction sequence as all of the steps needed to accomplish a particular task in an app. Tapping, swiping, typing, selecting, and moving from screen to screen. It can be visualized much like a storyboard told using wireframes.
Mobile Considerations
The chapters from Designing Interfaces you read last week were universally applicable to a range of devices. But we want to consider mobile devices in particular.
And, not just the fact that they have a smaller screen. Mobile devices connect to the internet wherever we are. They can retrieve our GPS location, health data, and which bluetooth devices we're connected to. They use touchscreen gestures and can track motion and direction through accelerometers and gyroscopes. And apps can even pass information between one another using APIs (application programming interfaces).
From Designing Interfaces, 3rd Edition by Aynne Valencia-Brooks, Charles Brewer, Jenifer Tidwell:
- Ch. 6 Mobile Interfaces
- Ch. 8. Doing Things: Actions and Commands
- Ch. 11 User Interface Systems and Atomic Design
From Designing and Prototyping Interfaces with Figma by Fabio Staiano:
- Chapter 5: Designing Consistently Using Grids, Colors, and Typography
- Chapter 6: Creating a Responsive Mobile Interface Using Auto Layout
Once you've completed the readings, you'll be ready to take this week's quiz on Blackboard. I would also recommend looking ahead at the Exercise to begin thinking about which app you'd like to analyze.
Week 4 Exercise: App Analysis and Feature Pitch
Looking Ahead
For your final project, you will suggest a new feature for an existing app and then mock-up those suggestions using Figma. Your goal is to identify a specific Interaction Sequence in the app demonstrates how a user is trying to accomplish a specific core task. The best way to identify something as a task is by asking what the user wants to do and then breaking-down each step.
Consider the phone apps you use regularly (excluding games, Amazon, Facebook, TikTok, Instagram, and Snapchat). Which ones work really well? Which ones could be better? Consider why it is some apps seem to fulfill your needs while others don't quite do everything you wished they would.
You can pick an app you really like that you wish had one more feature or you could pick an app that frustrates you that you would like to "fix".
If you choose a shopping or food app, you must consider an Interaction Sequence more specific than just an "add to cart" workflow. (You can message me on Teams if you aren't sure.)
Given all that you've learned about interface and user interaction design over this semester, what would sort of feature would improve one of those apps?
Examples of "tasks":
- "The user wants to navigate to their friends list in the Xbox app to invite them to play a game."
- "The user wants to decide what to cook for dinner based on the exercise data their smart watch recorded during the day."
- "The user wants to know where to stop for lunch at about 1pm while on a road trip."
You can either radically revise some aspect of an existing Interaction Sequence or create a whole new process within the app that solves the problem.
Consider what information the app could retrieve and act on such as
- dynamic content
- GPS location
- time of day
- calendar events
- health data
- information from other apps
- the location of friends
- bank account info
- etc!
You will identify which part of the app you plan on re-designing by taking a sequence of screenshots on your phone and importing them into Figma.
You should choose a task that involves at least four distinct steps. You can assume the user already has an account and is logged-in, so those does not count as steps.
But first: it's time to do some research and analysis.
Preparing for the Project
In preparation, this exercise asks you to do some analytical work to answer questions about the app and pitch your suggested new feature.
You will deliver this Design Discovery report as a Figma project.
- For the final project, you'll be using the "Material Design" kit that Google uses for its Android interfaces. Click "Open in Figma" on the Material Design 3 Kit and then choose "Make a New Copy" .
- Make sure to rename this duplicated project as your initials - app feature
- You're not going to use components in the kit just yet but you will be using the same project for the final. (We'll look at the Material Design assets next week for the final project.)
- Also rename this first blank page and title it "___app name___ Screenshots"
Screenshot Documentation
- Open your chosen app on your phone.
- These screenshots will function like a storyboard to explain how the app works.
- Screenshot the "home" screen of the app (whatever view that opens by default).
- Start working your way through your chosen task. Each time the screen changes, take a screenshot. This includes pop-ups, slide-in panels, text entry, search bar and results, confirmation dialogues, etc.
- You need at least four screenshots, but more is better.
For example, here's that Disney World app I used in Unit #5:
Importing and Annotating in Figma
- Send your screenshots to your computer.
- Select them in your file browser and drag-and-drop them into the canvas of the "___app name___ Screenshots" page you created in Figma.
- Ensure they are in the correct order and quickly create a Prototype transition between each frame ("on tap") so it can be clicked through like a slideshow.
Under each screenshot in Figma, add a textbox using the [T] text tool. I'm grading you on 80-100 words per screenshot, bolding at least two keywords/phrases per screenshot that you can find in the Tidwell textbook chapters 6, 8, and 11 above:
- What is happening in the app from the user's perspective
- Describe the interface "patterns" being used and why you think the designers made that choice.
- Describe how a person takes action and what interface elements support this
Lastly, using another text box on your canvas, pitch me a new feature that you could mockup with an interaction sequence. What's something it could be doing that it isn't? What else would be useful to users? Your pitch should be 100-150 words.
The following concepts are not sufficient for a new feature:
- Focuing entirely on an "add to cart" shopping task
- Showing us how to "toggle" your new feature on in the settings
- Solving the problem with a change to "the algorithm" (because that would be deep in the app's code and and you aren't able to demonstrate that)
- Creating a sign-up process
- Changing only the visual design
- "Bug fixes" (slow loading times, improper formatting, random logouts)
(Again: please do not choose Amazon, TikTok, Instagram, Snapchat, Facebook, or any games.)
- Explain where new features will be encountered.
- Explain what information the app needs to retrieve and what you expect the user to do
- Example: "This is where I would show a map full of icons of nearby fast food restaurants and the user would tap on one to get more information and tap 'confirm' to lock it in as their choice.")
Your objective is to convince me that your feature would be a meaningful improvement and that it is robust enough to build an interactive mock-up of for the final project.
Example: Dr. S Proposes a New Feature for Waze
"I'm trying to use an app that is supposed to help me plan a road trip so I'm going to propose a new feature for Waze. The problem is that Waze expects that I already know where I want to stop along my route. But I don't! So, I'd like to be able to first ask it for directions and then let me choose places where I could stop based on intervals of distances or specific times. (If I leave at 7am, where will I be when it comes time for lunch at noon? Show me lunch spots in that town.)" When it shows me the suggestion of where to stop, I should be able to tap it and add it to the route.
As before, click the blue [Share] button and choose "copy link." Submit this link to the Blackboard text field by Sunday July 28th at 11:59pm.