Web valley talk - usability, visualization and mobile app development
Users Interfaces for Science User Experience,Visualisation & a Brief Introduction to Mobile Apps (not mutually exclusive)Eamonn Maguireeamonn.firstname.lastname@example.org Images from phonegap.comWebValley
About meEducation Founder of Antarctic Design A design agency specialising in branding, web design and mobile apps for scienceComputer Science, Bioinformatics& Visualisation Past BSc Hons Computer Science Specialising in Software Engineering MRes BioinformaticsWorked 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
What I’ll talk about...1. User Experience/Usability2. Visualisation3. Bringing it all together. Mobile App Development
User Experience & Interfaces Having people use your tool.
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 theyll 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 :(
Basic Principles for Building Good User Interfaces1. 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 interfacehttp://bokardo.com/principles-of-user-interface-design/
Basic Principles for Building Good User Interfaces6. 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 ﬁnd 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/
Basic Principles for Building Good User Interfaces6. 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 ﬁnd 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/
Processes For Creating Better User Experience Think in the right way...Don’t think bottom up Do think top downlist of features what the user wantstechnical requirements what the user doesn’t know he wants, but probably really doeshow long would it take to code? which is easier for me? how this will affect/improve his/her lifelet’s do ajax! how he/she thinks it will improve...http://bokardo.com/principles-of-user-interface-design/
Processes For Creating Better User ExperienceStoryboarding Know what the user will be able to do. Plan how users will go through the system. Then ﬁgure out the interface... http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/
Processes For Creating Better User Experience WireframingDraw 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
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 fromhttp://www.dereckjohnson.co.uk/wp-content/uploads/2010/01/building-wireframe06.jpg
Examples - download user storyUser 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
Examples - search user storyUser will want to get to search things immediately.Therefore, the search option needs to be immediately visible! Google Obviously protectedplanet.net
Examples - ﬁlter user story (faceted searching)User will want to get to ﬁlter things immediately.Users will want to access this ﬁlter easily.Therefore, our search results screen should provide a ﬁlter option. e-moncot protectedplanet.net
Resources from which to buildhttp://bokardo.com/principles-of-user-interface-design/
Developing good websites quickly...interfaceMany 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/
Developing good websites quickly...fontsFonts will make or break your design. Get it right and try them out. Be consistent and select clearfonts....again, not Comic Sans!!
Bringing it all together...creating a page layout foryour 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
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 theiruser 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.
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
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
Search Screen Option 2 Eamonn Maguire What do you want to search for? Nucleus Analyse Data Upload Data
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 visualisation1.Information Visualisation Visualisation of abstract, usually discrete data2.Scientiﬁc Visualisation Visualising results of simulations, experiments or observations...often multi-dimensional
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.
A typical scientist workﬂow KnowledgeScientiﬁc papers, business strategy, medical diagnosis Observations Scientiﬁc, medical, business, etc. Some analysis Numbers Human expert
Where does visualisation ﬁt in? When the data size is really large, we need to help the expert. KnowledgeScientiﬁc papers, business strategy, medical diagnosis Observations Visualisation Algorithms Scientiﬁc, medical, business, etc. Interaction Numbers Human expert
Where does visualisation ﬁt in? When the data size is really large, we need to help the expert. SKA - Square Kilometre ArrayWill 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 ﬁrst uses of analysis on a static map. Image from 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 scientiﬁc 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
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
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
Visualizing Uncertainty Not all visualisations show errors correctly. The algorithms are not perfect, they are merely ﬁtting based on a model. Users should be made aware ofThe 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 ﬁnal 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.
Time series dataVisualizing time series data.Do not use video types animations. Our short term memory isnot good enough to compare between transitions.http://www.cellimagelibrary.org/images/1315Do use small multiples for instance. It can be easier to compare since all images are available at once.
Provenance value “is not just a region in France” the raw data J. Overington, 2012 value stage operatorMake sure users know how you got that image. data generation of analytical transformation abstraction (usually from extraction)Information allows for judgement and people are morelikely to appreciate your work if you divulge the approaches analyticaltaken 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 discretespace. It will always be inaccurate. However, ensuring we viewdocument where assumptions about documents are end-product of themade can only be a good thing. visualization mapping view stage operator
UsabilityIn the same way we discussed creation of user interfaces in a focused way, recap on one primary taskper 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
Creating VisualisationsThere are many libraries and frameworks available from which to create visualisations.1. Processing & ProcessingJS2. d3.js3. RaphaelJS4. IBMs ManyEyes
Mobile App Development With PhoneGap Images from phonegap.com
More on PhoneGapIt has inbuilt Compass, Accelerometer, Location and Camera Viewer within its API for iOS, Android, WP7, Blackberry etc. Images from phonegap.com
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.
AcknowledgementsPhilippe Rocca-SerraSusanna-Assunta SansoneAlejandra Gonzalez-BeltranJim DaviesMin ChenAnd to all the talks I watched which contributed to the content in this publication.