wireframing for mobile app developers

14
Wireframing for Mobile App Developers 04/11/14 Veiko Raime, Mobi Lab http://lab.mobi

Upload: veiko-raime

Post on 01-Jul-2015

400 views

Category:

Mobile


4 download

DESCRIPTION

Presentation explains how wireframing technics which are used mainly by designers, can be used in software engineering process by mobile app developers.

TRANSCRIPT

Page 1: Wireframing for Mobile App Developers

Wireframing for Mobile App Developers04/11/14Veiko Raime, Mobi Lab

http://lab.mobi

Page 2: Wireframing for Mobile App Developers

designing & developing for mobile

Are Wireframes only for designers?

UX designers show user flows with sketches of views of application.

Graphic designers user wireframes as input to their work process.

For developers wireframes gives high-level visual description to view elements and actions they need to develop.

QE can use wireframes to prepare test cases and ensure that product matches requirements described with wireframes.

PO and Client can review wireframes to ensure requirements are met with design process. It can be early feedback for UI and low-cost way to find UX problems.

Page 3: Wireframing for Mobile App Developers

designing & developing for mobile

So it brings engineering closer to UX design. What’s the point?

➔ Lean UX that could actually work.➔ Explaining ideas visually helps in communication.➔ Engineers can be better designers when it comes to native

components and patterns.➔ Test early and be more effective as a team.

Page 4: Wireframing for Mobile App Developers

designing & developing for mobile

Choose your wireframe style!

➔ Sketching - quickest way to explain your idea➔ Paper cutouts, play around with app➔ Stencils - if you perfectionist➔ Use some software: SmartDraw, Omnigraffle, presentation

tools etc.➔ Graphical design tools - Photoshop, Illustrator➔ Clickable prototyping tools

Page 5: Wireframing for Mobile App Developers

designing & developing for mobile

Sketches are easy to make for anyone. These help you to quickly try different ideas and help to communicate with others visually.

Page 6: Wireframing for Mobile App Developers

designing & developing for mobile

Paper cutouts are good to play around with ideas. Use those for testing your UX ideas.

Page 7: Wireframing for Mobile App Developers

designing & developing for mobile

Stencils help you put together components and have 1:1 feeling with real life. And you don’t have to be good in drawing lines :)!

Source: http://www.uistencils.com

Page 8: Wireframing for Mobile App Developers

designing & developing for mobile

Good thing about software tools like Omnigraffle is that they are very easy to use once you get used to them. Having them in file gives an option to have versions and change ideas on the fly.

Page 9: Wireframing for Mobile App Developers

designing & developing for mobile

Using designer tools is not really recommended. They are good when high-fidelity wireframes are needed. In engineering its usually not good idea to mix UX concepts with GUI.

Page 10: Wireframing for Mobile App Developers

designing & developing for mobile

When it is more important to explain more complicated interactions, these tools might come in handy. They are also easy to share over internet for collaboration.

source: https://pidoco.com

Page 11: Wireframing for Mobile App Developers

designing & developing for mobile

High-fidelity vs Low-fidelity?

It’s usually good idea not to go to designers playground and try to make as low fidelity wireframes as possible to explain your ideas.

Risk of having too many details in the beginning is that they are taken as visual design elements and implemented like this.

Page 12: Wireframing for Mobile App Developers

designing & developing for mobile

What to keep in mind.

➔ Be consistent, use the same language➔ Try lower fidelity whenever possible, practice it➔ You don’t have to have perfect wireframes to share your ideas➔ Draw wireframes on the fly and explain what you’re doing.➔ Use whatever medium you have in hand - whiteboard, piece

of toilet paper etc.➔ You still have to know the basics - be interested in common

UX patterns, human interface guidelines from platform makers.➔ Explore and use new apps and try to think why you like and

why you dislike something.

Page 13: Wireframing for Mobile App Developers

designing & developing for mobile

Explore around!

➔ You are the experts of OS specific guidelines!➔ Want to find more creative ideas:

◆ http://www.pttrns.com◆ https://mockupstogo.mybalsamiq.com/projects◆ http://www.android-app-patterns.com◆ http://inspired-ui.com◆ http://moobileframes.tumblr.com

Page 14: Wireframing for Mobile App Developers

Thank you!Veiko [email protected]

http://lab.mobihttps://www.facebook.com/lab.mobi