Web valley talk - usability, visualization and mobile app development

Users Interfaces for ScienceUser Experience, Visualisation & a Brief Introduction to Mobile Apps

(not mutually exclusive)

Images from phonegap.comEamonn [email protected]

mailto:[email protected]

mailto:[email protected]

About me

Founder of Antarctic DesignA design agency specialising in branding, web design and mobile apps for science

www.antarctic-design.co.uk@antarcticdesign

BSc Hons Computer Science Specialising in Software Engineering

MRes Bioinformatics

DPhil Computer ScienceSpecialising in visualisation of biological data

Now

Past

Computer Science, Bioinformatics & Visualisation

Education

Co-Founder of Interfaces group at EBI

Worked in some European labs in bioinformatics and physics, then Oxford as a Software Engineer

http://www.antarctic-design.co.uk

http://www.antarctic-design.co.uk

What I’ll talk about...

1. User Experience/Usability2. Visualisation3. Bringing it all together. Mobile App Development

User Experience

Having people use your tool.

& Interfaces

What is user experience?

It’s not complicated.Good experience vs bad experience when using your software.

Follow these tips to ensure you create a great experience for your users.

Or...your great software probably won’t get used.

This is awesome! I will hug the developers!Maybe follow them

on Google+ and maybe they'll

‘hangout'

This is pretty good! I will tweet about this and mention the developers!

This is not great! I will write an angry blog post. Maybe

send them a letter....handwritten.

I hate the developers. This software doesn’t do what I want it to

do. I’m going to write a publication about

how bad this is!

Or...it will get used but users will resent you :(

Basic Principles for Building Good User Interfaces

http://bokardo.com/principles-of-user-interface-design/

1. Interfaces are there to be used

5. Great design is invisible

4. Build on other design disciplines

2. Keep it simple

1.One primary action per screen2.Give lower visual priorities to secondary actions.

3. Consistency

1.Elements that behave the same should look the same, e.g. buttons.2.Utilise colour schemes and stick to it - see http://colorbrewer2.org/3.Use complimentary fonts. Or the same font. And don’t use comic sans!4.Use Grid Layouts. They almost always improve your design. Good spacing and good consistent layout. http://960.gs/

Make sure people can use them and that it is comfortable to use.

Graphic designers, web designer, visualisers, typographers. They are all part of UI design. Look into sites like dribbble.com, forrst.com, visualising.org for inspiration.

Happy users are silent users. So if you don’t hear anything from them, you’ve probably done a great job. Simple, elegant interfaces might not have the WOW factor, but they often work very well. Too much design can be intrusive and distract from the purpose of the interface



http://colorbrewer2.org/

http://colorbrewer2.org/

http://960.gs/

http://960.gs/



6. Create a strong visual hierarchy1.Menus should be accessed from the same place. 2.Help should always be available from the same location on screen.3.Users shouldn’t have to change where they look for the same features.4.If everything is bold, nothing will stand out. It’s hard to find the important thing.5.If some things are bold, then they will stand out...

Menu always at the top

Status update always in the same place.

‘Important’ information about the user is always in the same

place.





6. Create a strong visual hierarchy

Menus should be accessed from the same place. Help should always be available from the same location on screen.Users shouldn’t have to change where they look for the same features.If everything is bold, nothing will stand out. It’s hard to find the important thing

So, if I come to the page and wish to update my status, I know exactly where to look before the page even loads, simply because it’s always the same.

This strong visual hierarchy makes

Facebook successful at getting people to interact with it.




Think in the right way...

Don’t think bottom uplist of featurestechnical requirementshow long would it take to code? which is easier for me?let’s do ajax!

Do think top downwhat the user wantswhat the user doesn’t know he wants, but probably really doeshow this will affect/improve his/her lifehow he/she thinks it will improve...

Processes For Creating Better User Experience




http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/

Storyboarding

Know what the user will be able to do.

Plan how users will go through the system.

Then figure out the interface...




http://www.behance.net/Thimel

Wireframing

Draw out roughly how the interface will look. Don’t go in to getting graphics right too early...it’s a waste of time is the user doesn’t like it. Plus, if it is too polished, customers can feel like they can’t say no and

too much work has already been done.




Wireframing... tools to try out

balsamiq.com http://www.evolus.vn/Pencil/Home.html

Pen and paper image from http://www.dereckjohnson.co.uk/wp-content/uploads/2010/01/building-wireframe06.jpg

the most high tech!pen and paper.

http://speckyboy.com/2010/09/01/illustrator-template-toolbox-for-web-mobile-and-app-developers/

The below URL contains lots of wireframe components which you can reuse

http://www.evolus.vn/Pencil/Home.html

http://www.evolus.vn/Pencil/Home.html

http://www.dereckjohnson.co.uk/wp-content/uploads/2010/01/building-wireframe06.jpg






Examples - download user story

User will want to get to the download section quickly. The user will not need to know lots about the tool before downloading.Therefore, the download option needs to be immediately visible!

Google Chrome 960 Grid

User will want to get to search things immediately. Therefore, the search option needs to be immediately visible!

protectedplanet.net

Examples - search user story

Google Obviously

User will want to get to filter things immediately. Users will want to access this filter easily.Therefore, our search results screen should provide a filter option.

protectedplanet.net

Examples - filter user story (faceted searching)

e-moncot

Resources from which to build




Developing good websites quickly...interface


Many of the things you need to do have been done before.

You can create professional looking sites and mobile apps without much effort.



Developing good websites quickly...fonts

Fonts will make or break your design. Get it right and try them out. Be consistent and select clear fonts....again, not Comic Sans!!

Bringing it all together...creating a page layout for your Cell GIS system.

Users should be able to, for example:

1. Upload1.1. Images with meta data

2. Analyses on current data2.1. select cells and track how they change2.2. track cells over time or in varying conditions (e.g. difference between normal and diseased cell)2.3. browse 3D cell images

3. Search on current data.

As an example, let’s design the home screen

Storyboard for the home screen

user arrives on site

user can log in

user can search for cells through their type or metadata tags.

user can access other components of the site such as analyses and data upload easily

enter term in search boxquery expansion & autocomplete

Nucleus OrganisationNucelus LocalisationNucleus TransportNucleus

As an example, let’s make search the most important feature. Therefore it should be prominent in the page so that users can get to it quickly.

We’ve prioritised tasks on this page from 1 to 3. Search will be the primary function, navigation 2nd and log in 3rd.

We will weight these visually according to their priority.

Search Screen

what do you want to search for?

logo

MENU

FOOTER

Nucleus


autocomplete

search box takes prominance in UI

log in

log in. appears in same place as you’d expect to find in google, facebook, twitter, etc.

will contain options to search, analyse & load data

Option 1

Search Screen

what do you want to search for?Nucleus


autocomplete

search box takes prominance in UI

MENU MENU MENU

logo

Brief Description

FOOTER

log in

log in. appears in same place as you’d expect to find in google, facebook, twitter, etc.

will contain options to search, analyse & load data

Option 2

Search Screen Option 2

What do you want to search for?

Nucleus

Analyse Data Upload Data

Eamonn Maguire

VisualisationMaking analysis easier for users.

What is visualisation?

Tamara Munzner: "visualization systems provide visual representations of datasets intended to help people carry out some task more effectively".

Types of visualisation

1.Information VisualisationVisualisation of abstract, usually discrete data

2.Scientific VisualisationVisualising results of simulations, experiments or observations...often multi-dimensional

Why is visualisation required & how does it help?

1.Save time2.Spot patterns

distributionsclustersanomaliescorrelation...

3.External memorisation4.Stimulate hypotheses5.Visually “evaluate” hypotheses

save time (repeat)

Advantages

Visualisation can collapse 1000s of rows in a spreadsheet into something comprehensible and interpretable by users.

A typical scientist workflow

Numbers

Knowledge

ObservationsScientific, medical,

business, etc.

Scientific papers, business strategy, medical diagnosis

Human expert

Some analysis

Where does visualisation fit in?

Numbers

Knowledge

ObservationsScientific, medical,

business, etc.

Scientific papers, business strategy, medical diagnosis

Human expert

Visualisation Algorithms

Interaction

When the data size is really large, we need to help the expert.

Where does visualisation fit in?When the data size is really large, we need to help the expert.

SKA - Square Kilometre Array

Will produce more data day on day than the entire internet as it stands. 1 exabyte a day in fact.

That’s 1 Billion Gigabytes or 1 million Terabytes.

Visualisation is the only way in which to allow perusal of the data to determine correlations.

How is it useful?1854 Cholera Epidemic

Soho, London

Dr. John Snow created this map showing the number of

outbreaks plotted by location.

He also noted the water pumps since he was also attempting to prove that

‘miasma theory’, the previously believed

mechanism for cholera spread (by air) was false.

One of the first uses of analysis on a static map.

Image from http://en.wikipedia.org/wiki/File:Snow-cholera-map-1.jpg

http://en.wikipedia.org/wiki/File:Snow-cholera-map-1.jpg


How is it useful?1854 Cholera Epidemic

Soho, London

Through these plots he was able to not only see patterns for himself, but was able to communicate his views to

less scientific people to show the correlation between

pump location (blue) with the number of cholera cases.

In the end, the pump on Broad street was disabled

and the epidemic was halted(although there is some debate about

whether or not the epidemic was already in decline at that point)

Image from http://en.wikipedia.org/wiki/File:Snow-cholera-map-1.jpg



Visualising Glacier Movement in Greenland

How is it useful?

Each point represents a measurement. We wish to

see how much parts of Greenland are degrading

compared to others.

Y. Drocourt, R. Borgo, K. Scharrer, T. Murray, S. I. Bevan and M. Chen,Temporal visualization of boundary-based geo-

information using radial projection,Computer Graphics Forum, 30(3):981-990, 2011

10 years of time data200+ glaciers

How is it useful?

Summarising the changes in the glacier.

Could the same be applied to cell timelines?

Y. Drocourt, R. Borgo, K. Scharrer, T. Murray, S. I. Bevan and M. Chen,Temporal visualization of boundary-based geo-

information using radial projection,Computer Graphics Forum, 30(3):981-990, 2011

Things to avoid when creating visualisations

Visualizing Uncertainty

Not all visualisations show errors correctly.

The algorithms are not perfect, they are merely fitting based on

a model.

Users should be made aware of how the analysis is performed and the levels of uncertainty at

each step preceding the presentation of the final results.

Don’t take things for their face value.

Provenance is important. Knowing what processes an image has gone through in its processing is important and knowing the algorithms is

important.

Uncertainty Visualization Methods in Isosurface Rendering, Sparr et al, Eurographics 2003

The three isosurfaces created using Computer Tomography with uncertainty mapped to hue in the range (144, 0): (left) 128^3, (middle) 64^3,(right) 32^3

Time series data

Visualizing time series data.

Do not use video types animations. Our short term memory is not good enough to compare between transitions.

http://www.cellimagelibrary.org/images/1315

Do use small multiples for instance. It can be easier to compare since all images are available at once.



Provenance

Make sure users know how you got that image.

Information allows for judgement and people are more likely to appreciate your work if you divulge the approaches taken to create a visualisation.

We are mapping continuous phenomena to discrete space. It will always be inaccurate. However, ensuring we document where assumptions about documents are made can only be a good thing.

value

value stage operator

analytical

abstraction

analytical stage operator

data transformation

visual

abstraction

visualizationstage operator

visual transformation

view

viewstage operator

visual mapping transformation

the raw data

meta-data

visualizable information

end-product of the visualization mapping

takes an analytical abstraction and creates a visual abstraction

takes information in a visualizable format and renders it.

generation of analytical abstraction (usually from extraction)

“is not just a region in France”J. Overington, 2012

Usability

In the same way we discussed creation of user interfaces in a focused way, recap on one primary task per page, the same applies to visualisations.

We should also apply the same rules such as consistent use of colour, use of complementary colours, fonts, visual hierarchy, etc.

http://fathom.info/projects/saudihealth.htmlhttp://fathom.info/projects/ces.html

http://fathom.info/projects/saudihealth.html

http://fathom.info/projects/saudihealth.html

http://fathom.info/projects/ces.html

http://fathom.info/projects/ces.html

Visualisation Inspiration

Creating Visualisations

There are many libraries and frameworks available from which to create visualisations.

1. Processing & ProcessingJS2. d3.js3. RaphaelJS4. IBMs ManyEyes

Mobile App DevelopmentWith PhoneGap

Images from phonegap.com

The Advantage of Using PhoneGap

Normally, when developing native mobile applications, to support the most well used platforms, you must create Objective-C code for iOS and Java for Android.

Then you need more code to create versions for Windows 7 phone, BlackBerry, PalmOS, etc.

duplication of code = hard to maintain

image from phonegap.com

With PhoneGap, we create our application with HTML, CSS and JavaScript and can convert this one code base to native applications for iOS, Android, BlackBerry, Palm & Windows 7!


More on PhoneGap


It has inbuilt Compass, Accelerometer, Location and Camera Viewer within its API for iOS, Android, WP7, Blackberry etc.

Mobile collection of experimental data

You learnt a bit about usability. How to do it. Colours. Fonts. Aesthetics. Purpose.

Recap

You learnt a bit about visualisation. What is it? Some theory. How could you use it?

Bringing it all together. Application development? Mobile. Write once, run anywhere. PhoneGap.

Acknowledgements

Philippe Rocca-SerraSusanna-Assunta SansoneAlejandra Gonzalez-BeltranJim DaviesMin Chen

And to all the talks I watched which contributed to the content in this publication.

Questions