Web valley talk - usability, visualization and mobile app development
Upcoming SlideShare
Loading in...5
×
 

Web valley talk - usability, visualization and mobile app development

on

  • 857 views

Talk given to web valley students to introduce them to usability, visualization and mobile app development with PhoneGap.

Talk given to web valley students to introduce them to usability, visualization and mobile app development with PhoneGap.

Statistics

Views

Total Views
857
Slideshare-icon Views on SlideShare
852
Embed Views
5

Actions

Likes
0
Downloads
2
Comments
0

3 Embeds 5

http://www.linkedin.com 2
https://www.linkedin.com 2
https://si0.twimg.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web valley talk - usability, visualization and mobile app development Web valley talk - usability, visualization and mobile app development Presentation Transcript

    • Users Interfaces for Science User Experience,Visualisation & a Brief Introduction to Mobile Apps (not mutually exclusive)Eamonn Maguireeamonn.maguire@oerc.ox.ac.uk 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 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/
    • 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 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/
    • 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 figure 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 - 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
    • 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.Scientific 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 workflow KnowledgeScientific papers, business strategy, medical diagnosis Observations Scientific, medical, business, etc. Some analysis Numbers Human expert
    • Where does visualisation fit in? When the data size is really large, we need to help the expert. KnowledgeScientific papers, business strategy, medical diagnosis Observations Visualisation Algorithms Scientific, medical, business, etc. Interaction Numbers Human expert
    • Where does visualisation fit 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 first 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 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
    • 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
    • Things to avoid whencreating 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 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 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.
    • 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
    • Visualisation Inspiration
    • 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
    • The Advantage of Using PhoneGapNormally, 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
    • More on PhoneGapIt has inbuilt Compass, Accelerometer, Location and Camera Viewer within its API for iOS, Android, WP7, Blackberry etc. Images from phonegap.com
    • Mobile collection of experimental data
    • 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.
    • Questions