Guest lecture: Designing mobile apps

Designing mobile apps

Dr John Rooksby

In this lecture

• I will discuss app design, focusing on:

• The early stages of design

• Sketching, talking, and prototyping

• Key point: Effective design work done at the early stages of development will save time later on.

I am researcher in Computing Science at Glasgow. I have been studying how people use “personal informatics” apps

Personal informatics - examples

Rescue time Google Fit

Fit Bit Ginsberg

MatchFIT

Apps I’ve worked on

Pass the Ball


App Tracker



My City Glasgow

FITtogether (Work in progress)


So where to start?

Look at what is already out there

• Look at apps.

• What do they support?

• What do they do well?

• What is missing?

Talk to people

• Try to do open, exploratory interviews.

• Don’t just talk to people like yourself.

• Be open to surprises

Coming up with an idea

Sketch alternatives• Quick sketches of as many alternative designs as

you can.

• Do this to force yourself to think creatively. Your first idea is rarely your best.

• They don’t need to all be good ideas. Think about bad ideas - what makes them bad?

• Talk to others about your ideas.

Generated by CamScanner from intsig.comGenerated by CamScanner from intsig.com

Generated by CamScanner from intsig.comGenerated by CamScanner from intsig.com Generated by CamScanner from intsig.com

Sketch alternatives

• Five sketches for a health and fitness app

• All of these were produced as “bad” or “wrong” ideas for the particular project we were doing

Sketch alternatives

• Moving on to “good” ideas

Refine sketches

• The step counts for each week are separate (left), and then put together (right).

Producing a prototype

Formalising sketches

• These were produced using software called Sketch.

Implementing and trialling an app

Functional Prototype

• This was built this with Apache Cordova

• It was not completely finished, but “good enough” to trial

• We ran a user trial with 12 people

• We logged interaction with the app and interviewed them after 2 weeks

Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): app-start: "{}"

Mon Dec 08 2014 21:39:59 GMT+0000 (GMT): main-screen-data: "{\"steps\":6002,\"you\":7074,\"friends\":4433}"

Mon Dec 08 2014 21:40:04 GMT+0000 (GMT): main-swipe: {"page":1}








Mon Dec 08 2014 21:40:23 GMT+0000 (GMT): open-post-comment: "{}"




InterviewsWe interviewed (most of) the participants

• “Yeah it helped me compare myself against other people, against a sort of a trend. So I could see if I was dramatically below other people … so instead of getting the bus in the morning I walked, but I didn’t like go out of my way to walk more”.

• “You don’t know if these are sporty people, or if they walk a lot, or err, this number here is not, it doesn’t represent much I think.”

• “I didn’t have much to write so I said hello. Maybe knowing the other people would make me say more.”

Logs and Interviews• Logs are good at showing what people did.

• Interviews are good for finding out why people did these things.

• For example:

• The logs showed us not many people wrote comments in the app, the interviews helped us identify why.

• The logs showed us some people liked the daily steps view, but others looked more at the weekly view, and in the interviews we could address why.

• A trial gives you insights into how to improve an app, but its back to the sketch book.

Release and beyond

(Re)Design and

implement

Gather and analyse

engagement data

Iterative design does not end with a release

Conclusion

Refined sketches

sketchesMore sketches

Paper prototype

Functional Prototype

Release

Further features

Iterative design looks somewhat like this

• Make your mistakes early

• Help customers articulate their ideas

• Get the design as settled as possible before implementation

• Its quicker and less stressful to make changes earlier than later.

Why do iterative design?

• Sketching helps frequent and fast iteration.

• It is quicker to sketch on paper than on computer.

• Use sketches as a way of thinking through the design and as things for discussion with others.

• Prototypes do not need to be perfect, just “good enough”. Think of a prototype as a sketch.

• Talking with people is important .

• Feedback is very helpful.

• Logging and analytics become important later when you gain a larger user base.

Sketching

Thank you.

Guest lecture: Designing mobile apps

Technology

Transcript of Guest lecture: Designing mobile apps