This document provides an overview of user interfaces for science, including user experience, visualization, and mobile app development using PhoneGap. It discusses principles of good user interface design like simplicity, consistency, and visual hierarchy. It also covers processes for creating interfaces like storyboarding and wireframing. Visualization is discussed as a way to help users analyze and understand large datasets. The document cautions against potential pitfalls in visualization like unclear representations of uncertainty. It concludes by mentioning libraries for creating visualizations and frameworks like PhoneGap for developing mobile apps.

1. Users Interfaces for Science
User Experience,Visualisation & a Brief Introduction to Mobile Apps
(not mutually exclusive)
Eamonn Maguire
eamonn.maguire@oerc.ox.ac.uk Images from phonegap.com
WebValley

2. About me
Education Founder of Antarctic Design
A design agency specialising in branding, web design and mobile apps for science
Computer Science, Bioinformatics
& Visualisation
Past
BSc Hons Computer Science
Specialising in Software Engineering
MRes Bioinformatics
Worked in some European labs in bioinformatics and
physics, then Oxford as a Software Engineer
Now www.antarctic-design.co.uk
@antarcticdesign
DPhil Computer Science
Specialising in visualisation of biological data
Co-Founder of Interfaces group at EBI

3. What I’ll talk about...
1. User Experience/Usability
2. Visualisation
3. Bringing it all together. Mobile App Development

4. User Experience
& Interfaces
Having people use your tool.

5. What is user experience?
It’s not complicated.
Good experience vs bad experience when using your software.
This is awesome! I will This is pretty good! This is not great! I I hate the developers.
hug the developers! I will tweet about will write an angry This software doesn’t
Maybe follow them this and mention blog post. Maybe do what I want it to
on Google+ and the developers! send them a do. I’m going to write
maybe they'll letter....handwritten. a publication about
‘hangout' how bad this is!
Follow these tips to ensure you create a great experience for your users.
Or...your great software probably won’t get used.
Or...it will get used but users will resent you :(

6. Basic Principles for Building Good User Interfaces
1. Interfaces are there to be used
Make sure people can use them and that it is comfortable to use.
2. Keep it simple
1.One primary action per screen
2.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/
4. Build on other design disciplines
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.
5. Great design is invisible
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://bokardo.com/principles-of-user-interface-design/

7. Basic Principles for Building Good User Interfaces
6. Create a strong visual hierarchy
1.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
‘Important’ information about
the user is always in the same
place.
Status update always in the
same place.
http://bokardo.com/principles-of-user-interface-design/

8. Basic Principles for Building Good User Interfaces
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.
http://bokardo.com/principles-of-user-interface-design/

9. Processes For Creating Better User Experience
Think in the right way...
Don’t think bottom up Do think top down
list of features what the user wants
technical requirements what the user doesn’t know he wants, but probably really does
how long would it take to code? which is easier for me? how this will affect/improve his/her life
let’s do ajax! how he/she thinks it will improve...
http://bokardo.com/principles-of-user-interface-design/

10. Processes For Creating Better User Experience
Storyboarding
Know what the user will be
able to do.
Plan how users will go
through the system.
Then figure out the
interface...
http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/

11. Processes For Creating Better User Experience
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.
http://www.behance.net/Thimel

12. Processes For Creating Better User Experience
Wireframing... tools to try out
the most high tech!
balsamiq.com http://www.evolus.vn/Pencil/Home.html
pen and paper.
The below URL contains lots of wireframe components which you can reuse
http://speckyboy.com/2010/09/01/illustrator-template-toolbox-for-web-mobile-and-app-developers/
Pen and paper image from
http://www.dereckjohnson.co.uk/wp-content/uploads/2010/01/building-wireframe06.jpg

13. 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

14. Examples - search user story
User will want to get to search things immediately.
Therefore, the search option needs to be immediately visible!
Google Obviously protectedplanet.net

15. Examples - filter user story (faceted searching)
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.
e-moncot protectedplanet.net

16. Resources from which to build
http://bokardo.com/principles-of-user-interface-design/

17. 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.
http://bokardo.com/principles-of-user-interface-design/

18. 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!!

19. Bringing it all together...creating a page layout for
your Cell GIS system.
Users should be able to, for example:
1. Upload
1.1. Images with meta data
2. Analyses on current data
2.1. select cells and track how they change
2.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

20. Storyboard for the home screen
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.
user can log in enter term in search box
query expansion & autocomplete
user can search for cells through their
user arrives on site type or metadata tags.
Nucleus Organisation
user can access other components of the Nucelus Localisation
Nucleus Transport
site such as analyses and data upload easily Nucleus
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.

21. Search Screen
Option 1
logo log in
log in. appears in same place as
MENU you’d expect to find in google,
facebook, twitter, etc.
will contain options to
search, analyse & load search box takes
data prominance in UI
what do you want to search for?
Nucleus
Nucleus Organisation
Nucelus Localisation
Nucleus Transport
Nucleus
autocomplete
FOOTER

22. Search Screen Option 2
logo log in
log in. appears in same place as
you’d expect to find in google,
Brief Description facebook, twitter, etc.
search box takes
prominance in UI
what do you want to search for?
Nucleus
Nucleus Organisation
Nucelus Localisation
Nucleus Transport
Nucleus
autocomplete
MENU MENU MENU
will contain options to
search, analyse & load
data
FOOTER

23. Search Screen Option 2
Eamonn Maguire
What do you want to search for?
Nucleus
Analyse Data Upload Data

24. Visualisation
Making analysis easier for users.

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

26. Types of visualisation
1.Information Visualisation
Visualisation of abstract, usually
discrete data
2.Scientific Visualisation
Visualising results of simulations,
experiments or observations...often
multi-dimensional

27. Why is visualisation required & how does it help?
Advantages
1.Save time
2.Spot patterns
distributions
clusters
anomalies
correlation
...
3.External memorisation
4.Stimulate hypotheses
5.Visually “evaluate” hypotheses
save time (repeat)
Visualisation can collapse 1000s of rows in a spreadsheet into something comprehensible and interpretable by users.

28. A typical scientist workflow
Knowledge
Scientific papers, business strategy,
medical diagnosis
Observations
Scientific, medical,
business, etc.
Some analysis
Numbers
Human expert

29. Where does visualisation fit in?
When the data size is really large, we need to help the expert.
Knowledge
Scientific papers, business strategy,
medical diagnosis
Observations
Visualisation Algorithms Scientific, medical,
business, etc.
Interaction
Numbers
Human expert

30. 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.

31. 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

32. 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

33. How is it useful?
Visualising Glacier
Movement in Greenland
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

34. How is it useful?
10 years of time data
200+ glaciers
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

35. Things to avoid when
creating visualisations

36. 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
The three isosurfaces created using Computer Tomography with uncertainty mapped to hue in the range (144, 0): (left) how the analysis is performed
128^3, (middle) 64^3,(right) 32^3
Uncertainty Visualization Methods in Isosurface Rendering, Sparr et al, Eurographics 2003
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.

37. 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.

38. Provenance value
“is not just a region in France” the raw data
J. Overington, 2012 value stage operator
Make sure users know how you got that image.
data generation of analytical
transformation abstraction (usually from extraction)
Information allows for judgement and people are more
likely to appreciate your work if you divulge the approaches analytical
taken to create a visualisation. abstraction
meta-data
analytical stage
operator
visual takes an analytical abstraction
transformation and creates a visual abstraction
visual
abstraction
visualizable information
visualization
stage operator
visual mapping takes information in a visualizable
transformation format and renders it.
We are mapping continuous phenomena to discrete
space. It will always be inaccurate. However, ensuring we
view
document where assumptions about documents are
end-product of the
made can only be a good thing. visualization mapping
view
stage operator

39. 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/ces.html http://fathom.info/projects/saudihealth.html

40. Visualisation Inspiration

41. Creating Visualisations
There are many libraries and frameworks available from which to create visualisations.
1. Processing & ProcessingJS
2. d3.js
3. RaphaelJS
4. IBMs ManyEyes

42. Mobile App Development
With PhoneGap
Images from phonegap.com

43. 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!
Images from phonegap.com

44. More on PhoneGap
It has inbuilt Compass, Accelerometer, Location and Camera Viewer within its API for iOS, Android, WP7, Blackberry etc.
Images from phonegap.com

45. Mobile collection of experimental data

46. Recap
You learnt a bit about usability. How to do it. Colours. Fonts. Aesthetics. Purpose.
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.

47. Acknowledgements
Philippe Rocca-Serra
Susanna-Assunta Sansone
Alejandra Gonzalez-Beltran
Jim Davies
Min Chen
And to all the talks I watched which contributed to the content in this publication.

48. Questions