Mobile App Design: From Sketches to Interactive Prototypes, Learn to turn UX Design sketches into an interactive prototype on your mobile in a quick and fun way using Marvel App.
- Briefs 1 2 3 – Create Mobile Interactive Design Prototypes Powerpoint
- Briefs 1 2 3 – Create Mobile Interactive Design Prototypes Download
Apr 15, 2019 86618 KB Get AiNV Briefs v 3.3.3 1.3.6 Best to Mojave amisrosnave87 2019-04-15 05:28 (best 13) Create mobile interactive design prototypes. How install to Mojave. Section 2: When to Paper Prototoype: Paper prototyping is most effective when done earlier on in the design process, and here we'll look at why that is. Section 3: Tricks for Productive Paper Prototyping: An exploration into tools, techniques and templates for creating more effective paper prototypes. For your information, this workshop which consist of 2 sessions will be held on Saturday, November 3rd with the rundown details of each session listed below: 1. Session 1 (10:00 - 12:30) Introduction to prototype. Getting familiar with Protopie. Live creation of interactive prototype. Break Time (12:35 - 15:25) 3.
Based on our proposed persona and scenario elaborated in the last post, we came up with human-centered design prototypes for our bike renting application focusing on a high User Experience (UE or UX). This post provides the prototypes along with motivation of design choices.
2.1 Identify functionalities
To make sure the application centers around humans, we identified bikers' needs as tourists':
- Most bikers are young and have mobile phones
- Bikers concern the size of the bike first (whether they fit it), then how convenient it is to get the bike (how far the bike is located)
- Most bikers want to have bike accessories such as helmet and lights, or even knee/elbow caps.
- Most bikers want more information of the bike, i.e. full specifications.
Based on that, the functionalities of the application are defined:
- Sign in/sign up
- Checking bikes with most important specs (size and distance)
- Full info of the bike
- Input renting period (days) and option to get bike accessories (helmet)
- Show total price
- Show past orders and feedback (rating)
2.2 Prototyping
a) Exploration prototyping
When it comes to creating our prototypes, we experienced a dilemma idea of making either a website or a mobile app. Therefore, we followed the explorationapproach for prototyping by starting with both. We created two low-Fipapersketching prototypes, one for the website and the other for the mobile app. This gave us the idea of how we want to design the application. We tried to keep the design as practical as possible, including the real size of the monitor screen and how big the elements are to fit in one screen window.
As mentioned earlier, the following interfaces are what needed for the application.
- a welcome/landing page
- a registration page
- a payment page
- a search bar
- a catalogue page to show the bikes available.
Furthermore we looked at other websites of similar companies for design layout inspiration. Airbnb's website would soon prove to be quite the inspiration. It's concept is very similar to our idea except that they use places to stay instead of bikes. Nevertheless their website was very helpful in deciding our design. An example is the search bar. The Airbnb website includes a search bar on the landing page which is visible on every other page as well. A good idea, we thought, so we implemented it in our prototypes.
We arranged the information differently for both prototypes: the website and the mobile app. As shown in the images, the website prototype had more space to show the different bikes and describe each bike. The mobile app prototype was more compact and easy to see all of the information.
After creating both prototypes, we weighed the pros and cons of each design. For the website, it was easy to read everything, usually there is more in-depth information at a time, and you are able to look at other websites easily as well. For the mobile app, the information needs to be more concise. Obviously because there is less space on the screen, because of which, the search function is not usually implemented as separate page rather than just a bar in practice.
Realizing so, we decided to go further with the mobile app prototype to refine it more for better affordance and accessibility. As for accessibility, if someone has to quickly look up the location of the bike they rented, they can easily find it on their smartphone and message the owner instead of pulling out their computer. In addition, if there is a mobile version, someone can use their data to access the app and are not restricted to wifi to search for bikes. Meanwhile, a high affordance design allows a more intuitive application.
b) Evolutionary prototyping
To further develop the mobile application prototype, we decided to create an interactive digital mock-up prototype which has highfidelity and allows incremental improvements. Going with a digital design also allows small detailed adjustment in the design. Finally, the interaction with the prototype will be of great advantage in the evaluation phase since users have hands-on experience with a prototype that feels real.
Both the low-Fi and high-Fi Duke nukem 3d. prototypes of the mobile applications are presented in the following part.
2.3 Papersketching prototype for the mobile application
Briefs 1 2 3 – Create Mobile Interactive Design Prototypes Powerpoint
In this picture, you can see the first draft of our application's mobile website or app.
‘Name' is of course only a placeholder for what the rental service is going to be called. We thought about different kinds of names, but did not find the perfect one yet. Still, we would like it to convey the image of a friendly neighbourhood help that is more about being nice and making friends, and less about being serious and making lots of money. For these reasons, we liked the idea of the logo being a bike wheel in heart shape. Of course a heart would be a terrible wheel on any kind of vehicle, but it gives users an idea of our concept.
Below the name and the logo, we would like to have a brief, concise description of what this page and service is about. It should not be more than 1-2 sentences so a reader is not overwhelmed and bored by a large amount of information. For example, the main slogan on the airbnb website from which we gained inspiration, is 'Book unique homes and experience a city like a local.' It is only one sentence, but visitors of this website immediately understand the concept. We would like our website to have a slogan that is as precise and engaging.
Next, you can see the search bar. It not only lets you search for cities or countries in which you would like to rent a bike, but you can also look for general information here. Search words like e.g. ‘payment' or ‘register' should take you to the corresponding subpages. The logo and the search bar are always fixed at the upper part of your phone screen if you look at the mobile website. Even when scrolling further down, these two important features are always visible and usable.
So when scrolling down, the user sees a gallery of bikes that are ready to be rented out. This could be a random selection of available bikes, or some especially cheap or good bikes, or some that are close by. We would like to implement this gallery as an automatic slideshow. On the desktop version of our website, where data usage is not a concern, we could also show an appealing video of happy biking people that explains our ideas.
Wolfram mathematica 12 0 0 4. The picture below is a second draft of the mobile version, together with very brief summaries of the functionalities explained before.
2.4 Interactive mock-ups prototype for the mobile application
The interactive prototype includes 8 interfaces as follows and can be tried in this link.
1. Welcome/landing page
2. Sign in page
3. Sign up page
4. Short tutorial of the app
5. Catalogue page showing available bikes
6. A page showing information of a bike
7. Purchase page
8. Order history
Some thoughts on why we think we have had a good design: Xiaomi redmi note 5 64gb.
High degree of visibility: Users know which functions they can choose in the application and at which stage they are at when they follow a normal usage flow.
Users have a good conceptual model of the application – what they can do and how are they connected. The transition between interfaces, transitional buttons and side menu provide this.
Briefs 1 2 3 – Create Mobile Interactive Design Prototypes Download
Feedback and good mapping are generally satisfied when applying GUI templates in software design (such as buttons, select boxes, etc.) This also satisfies affordance led design principle, making the application intuitive and users do not need to learn through instructions.
Good visual perception: size and color of elements in the interface, also the combination of colors. We go for a white background and grey texts for our application because the combination provides high contrast and does not make the eyes tired (suggested from lecture 6 Psychology and cognition).
Usability with one hand: studies show that half of the time users use one hand for completing tasks on the phone (read more in the source article) and not all of the interface can be reachable when using the phone in this fashion. Self-reflecting to our design, the back button located at the top-left corner to go back to the previous page is not very accessible for users using one hand; therefore, we also support right-swiping to transition to the previous page.
