UX/UI Interaction
The primary purpose of this assignment is to demonstrate how interactivity will function within overall design. There are many programs that designers might choose to accomplish this by creating a prototype. If you have previous experience prototyping interactivity (UX/UI design) then you are free to choose any program that you wish to demonstrate the goals of this assignment. However, if you do not have previous experience in this area then you will be using the program Figma.
Overview
In this assignment, your task is to build and test a working prototype. You will use principles of user experience (UX) design to create an interactive prototype. Interactive prototypes, while still not a finished design, allow UX designers to demo a fully functional user interactive experience, allowing for more meaningful and useful feedback from a client before committing the design to full production and engineering.
XD Introduction
- Animate prototypes in XD
- Fixed Elements in XD
- To make specific objects you wish to remain visible or fixed in position and not scroll, select the element, or grouped elements, while in the prototype mode and click the “fix position when scrolling” box.
- Scrollable Artboards in XD
- To access the scrollable option, click the NAME of the artboard in Design mode
- Expand the artboard/window to accommodate all of the height of the image you wish to scroll. Expand or stretch it down until you see the little blue = sign on the bottom left of the window
- Change the option to VERTICAL in the scrollable options box from the Prototype mode
https://youtu.be/E2RsTm8U2x4
https://youtu.be/HqQtYIMnWhM
Also Watch these videos below:
How to Design an App; Prototype a Mobile App—Adobe Xd Tutorial
Once you have a general idea of how XD works you are ready to start designing your app. The following are the 9 basic steps to creating an App. For this assignment we are creating a prototype or mockup only. Therefore we WILL NOT be going through the entire 9 steps to develop a working App. This assignment will only be going through the first 4 steps listed below.
- Sketch your app idea
- Do some market research
- Create mockups of your app
- Make your app’s graphic design
––––––––––––––––––––––––––––––––– - Build your app landing page
- Make the app with Xcode and Swift
- Launch the app in the App Store
- Market your app to reach the right people
- Improve your app with user feedback
Before you begin it is important to fully understand the following concepts:
An App is a tool. Like a hammer or screwdriver if used properly, it should do one job (and one job only) very well. As the designer you decide what that one job should be.
An App is also a form of UX design. This means that you, the designer, must try to anticipate or guess all the possible ways that a person will select the choices you present to them—in what order/sequence, how often, for what purpose, etc.
A successful App is the result of the collaboration between the design team and the Engineering team. The engineers focus on the “back end”of the project—making things work efficiently, seamlessly, economically, without technical glitches, etc. The designers focus on the “front end” work—the look, the user experience, the target audience, the client needs, staying on brand, etc. This assignment is meant to show your ability to apply your design knowledge and skill to the front end requirements of an app. Typical workflow would require approval of the designer’s prototype which would then be passed along to the engineers to make it a functioning reality on the internet.
Initial Thought PROCESS
Assignment Resources:
- Decide what or who the app will be used for. You have a choice of one of these two options for the subject of your app:
- Icon Set Assignment
- Branding Assignment
- Every app starts with an idea. What do you want your App to do? What is it’s purpose? A good app does one thing well. It’s tempting to make an app with a lot of features. This only obscures the one thing your app is good at. Make sure your app does one thing only, and does it well.
You want the app to be as lean and mean as possible. That’s called a Minimum Viable Product (MVP), and it’s the first, simplest version of your app. When you focus on what matters most, all features should support that focus point/purpose.
Separate the features of the app into two groups: Must Haves and Nice To Haves. The Must Haves are features that your app can’t do without to be able to serve the basic purpose of the App and the Nice To Haves are features that are great but not crucial.
Your app’s success is determined by “idea x execution”. Making an app that works well is more important than finding an idea that is perfect. A unique design idea is secondary to a design idea that solves a problem for the user efficiently and easily. Some examples:
- A note-taking app like Bear is superb for taking notes
- A transportation app like Uber helps people go from A to B – the other features are secondary
- A game app like Two Dots is great at entertaining people – it shouldn’t try to do more
A few questions you can ask yourself: - What features can you leave out?
- Which feature is a unique selling point or money-maker?
- Are there any features that make your app bloated, or slow building it down?
- What are alternative apps and competitors in the marketplace?
- What do potential customers want? What are their needs and desires?
- How much should I charge for my app? What’s a good business model?
- Who is your app for? What are they like? How does your app impact a particular problem that users are struggling with? How are they currently solving that problem? What change do you, with your app, seek to make?
Two types of market research are especially helpful:
- Finding out what mistakes your competitors are making
- Finding out if people are looking for an app like yours
To completely develop working apps you will need to do some market research. In this assignment where we are simply making a prototype, you will not to do the same amount of research. You will, however need to look generally at what apps for competing or similar products/services/companies look like and how they function. Then ask yourself what is missing from them? and How can yours be better?
Doing market research before you make your app can save you from making a lot of mistakes early on. You validate assumptions and assess the needs of potential customers.
Based on your research you can clearly define the problem your app solves, and who you solve that problem for. You use these insights to make an app that serves its users better. Finding insights also serves another purpose. You want to walk in the shoes of your customers, so to speak. Instead of assessing needs and desires while sitting safely in front of your computer, you want to get out there and talk to people. Don’t underestimate the importance of preparation, research and insight, though!
Create the Mockup/Prototype Of Your App
It’s always best to make prototypes before you engineer a finished app. A prototype or mockup is a rough sketch of your app’s layout, user interfaces (UIs) and flow. In this assignment we will be using Adobe XD to create a working prototype.
Mockups don’t include:
- Fine-grained UI elements
- Exact positioning of UI elements
- Complex color schemes and effects
A mockup shows you what an app looks like, without distracting you with unnecessary details. It’s a functional as well as an aesthetic approach to your app’s design.
A mockup should also describe the flow and interactions of your app. What happens when you tap on that button? How do you get from screen A to screen B? What is navigation flow of your app?
When you’re making an app for a client or employer, creating a mockup is a good opportunity to show them the end result before building the app. You can guide them through the UI, by using the mockups, and help them see and imagine the complete app. I always use mockups in sales meetingswith clients.
It’s also a great idea to describe what the app does in simple words. You can create annotations in your mockup software, or just create a text document that explains how the app works.
A mockup helps you fix basic UI/UX problems early on, and it’s a great way to enroll your team, client or employer in your app project.
Sketch it Out first
Sketch out your app idea with pencil and paper. The goal is to make the idea tangible. You define how your app works and what its features are, before you start developing the app. It’s as simple as that! What is a logical sequence? What are questions a user would have and how would they use the App to get answers to those questions? What will that look like? Start sketching, make a list of features, and see if the idea comes to life on paper.
In this case, sketching means to create a design “tree” or “design user flowchart” with the primary purpose of diagraming the links between pages or other graphic elements (images, icons, buttons, graphics, etc.) A comparison could be a storyboard to a finished animation, a maquette to a final sculpture or a dummy to a finished book.
The Look
The design for your app. Your app’s design can include pixel-perfect visual details, graphic effects, image assets, and sometimes even animations and motion design. The look is typically an extension of a company’s existing brand identity.
Don’t forget to check out the Human Interface Guidelines. They are exceptionally helpful for understanding how iOS design works, so you can take advantage of the design of iOS when making your app. In fact, Apple’s documentation is a treasure trove of insights into app development.
As an app developer you want to create a connection between you and a prospect customer, to let a conversation happen. Such a conversation can then lead to a user trying out your app or becoming a customer.
Your app’s page needs the following components:
- A clear headline at the top of the page
- A brief introductory paragraph or explainer video
- An app screenshot or iPhone mockup
- A call to action, i.e. to sign up or install the app
- A breakdown of app features and benefits
- A story about the app’s creators, or an “About Us” section
The URL for your final design for this project should be uploaded to this Canvas page and also emailed to me using the Share option from XD.
FINE TUNING:
Building micro-interactions in Adobe XD
Creating a Hover State for buttons in XD
When you are ready to share your prototype design with other designers or for feedback/review, do one of the following:
- Desktop Preview
or - Choose SHARE, from the top menu
TO Turn in your project
• Go to “Share” from the top menu,
• Pick “Design Review” and “Only Invited People” options
• Click the “Update Link” button and
• Paste in the email addresses of the people you wish to share (invite) your design. (for this assignment only, copy the list of class emails below and paste them in the “Invite People” field.)
• ALSO
Copy the project link (click the chainlink icon to do this) and
• Submit it to the Canvas assignment page and also email that link to me.
•paste the addresses below in the “invite people” field of your XD project