User Interface Design for Infographics for Software Engineering Workshop 2B, UNSW

Transcription

1 User Interface Design fr Infgraphics fr Sftware Engineering Wrkshp 2B, UNSW Shahla Ghbadi August 2013 Intrductin This chapter intrduces infgraphics and their recent trend. Static and interactive infgraphics are explained, and, challenges in the design f interactive infgraphics are discussed. A three-step prcess fr designing infgraphics with a particular fcus n design is suggested and discussed. Sme ppular websites that allw infgraphics design are pinted ut, prir t describing a case f using infgraphics t analyze 2012 US electin. 1 P age

2 What are Infgraphics and why we use them? We increasingly need t cmmunicate ur messages in cncise, simple and engaging ways. Visual representatins such as infgraphics and data visualizatin can accmplish this aim. Infgraphics are nt new cncepts. Fr example, they have been utilized in the frm f Excel graphs r PwerPint slides fr decades (e.g., shwing trend f sales within the past tw years). The increasing amunt and cmplexity f infrmatin in ur sciety require mre sphisticated ways f creating and sharing such visualizatins. Thankfully, diverse applicatins, Internet and real-time settings have expanded the realm f what is pssible thrugh infgraphics and have allwed displaying cmplex cncepts in a simpler and mre understandable way. Encapsulating cmplex cncepts in simple messages help peple see patterns and trends in data easier and in turn d smething abut that1. Fr example, health prfessinals can encurage peple t take care f their skin by presenting simple statistics n the usefulness f indr tanning (see figure belw). In anther example, infgraphics can help pliticians understand the presence and ppularity f diverse plitical views acrss different age grups ( In additin t these, infgraphics can drive the business by building Internet traffic, links and raising brand awareness. Fr example, peple can see an interesting infgraphic, click n the link, and then be directed t the business website ( Infgraphics types and User Interface Challenges Infgraphics can be static r interactive. Static graphics are cmmn, easy t build, hst, share, and view (e.g., examples in the previus figure). Interactive infgraphics, ften Flash-based, are 1 Sme inspiring infgraphics can be seen frm: P age

3 als becming mre cmmn. They allw designers and develpers t visualize multiple layers f data in a single interface, while prviding a dynamic user experience fr the viewer (e.g., Such infgraphics are ften narrative-based and use a cmbinatin f illustratin, data visualizatin, and text t infrm the viewer n a particular tpic ( Scial media and data visualizatin tls have prvided a fertile grund fr interactive infgraphics. Fr example, scial analytics prvide valuable infrmatin t feed infgraphics, while data visualizatin tls enable mnitring, tracking and visualizing that infrmatin in an apprpriate frmat. As a result, infgraphics can pull ut disperse and cmplex infrmatin frm the web, analyse them, give them meaning, and make them available fr viewers. Fr example, cmpanies can use infgraphics in real-time settings t mnitr, track, and measure their scial presences and brand sentiment n the web. Fr example, during Lndn Olympics, Unruly's Brand Tracker infgraphic pitted the fficial spnsrs against each ther in a race fr which nline vide ads frm the spnsrs generated the mst scial media buzz. Using the Unruly s Viral Vide Chart, it tracked the ttal number f shares acrss Facebk, Twitter and the blgsphere fr each brand ( The current trend shws that infgraphics are becming mre interactive. Suggesting a prmising future fr infgraphics, designers have realized that interactin with infgraphics can prvide a rich user experience ( Financial-Advice-INFOGRAPHIC). Fr example, stale financial infrmatin culd becme dynamic t imprve users understanding f financial trends 2. Such infgraphics bring heart f the site s cntent t the frefrnt and allw users t be hands-n. While this can be a rewarding experience fr users, designing and implementing a user-interface adds additinal challenges that need careful attentin and management. Based n the fundamental steps f web design, the fllwing sectin prvides a three-step prcess fr designing infgraphics. Steps in designing Infgraphics P age

4 This sectin suggests three steps fr designing infgraphics including: effective planning, design and layut, and strategic implementatin. Each step is explained in belw alng with relevant examples. ü Effective planning The primary gal f develping an infgraphic is t prmte understanding. T achieve this gal, we need t have sufficient planning. Effective planning shuld cnsider several dimensins including: 1. Plan the backgrund. What d yu want peple get ut f the infgraphic? Are yu lking fr brand prmtin, imprving awareness r scial change? Defining a gd stry makes yu fcused and increases the chance f prmting yur key gal. Infgraphic shuld nt be a stry abut yu; if yu chse this, make sure t use scial prf. It is gd t directly lead viewers t take further actins after seeing infgraphic. 2. Define the audience. Wh are the peple yu want t visit yur site? Clearly defining yur existing r ptential visitrs increases the chances f prmting yur prduct r services in a mre effective manner. 3. Plan the cntent. What types f infrmatin shuld be prvided t supprt yur stry and attract yur audience? Is there a way t draw upn existing material yet t be creative in selecting cntent materials? 4. Plan the presentatin. Hw d yu want t rganize and present yur infrmatin? Shuld yu als include embed cde and scial sharing buttns n the page? Tpgraphy (text), graphics, vide, audi and animatin are all different types f media that need be cnsidered. Smart graphics are intended t reduce users memry lad and cmbining different types f media can enhance user experience and expand the reach f yur message. 5. Plan the navigatin. Hw d yu want peple navigate and interact with yur infgraphic? Hw quickly can yur visitrs find what they are lking fr? ü Design and layut After all planning wrk is cmpleted, the next step wuld be chsing the right design elements and fllwing rules t ensure yur message is being cnveyed t users in a simple, quick and influential manner. Fr example clear navigatin, clean lines and a simple layut will make it easy fr visitrs t understand and interact with yur infgraphic. Design is a stage that yu will have the pprtunity t manifest what yu had decided t d in the planning stage. Sme f the mre imprtant design cnsideratins are: 1. Clarity and Cherence. When designing the interface, it is imprtant t think hw easily yur visitrs can understand and related t the infrmatin yu prvide. This will help yu achieve yur gal f creating the infgraphic (previus step). Cnsider describing yur infgraphic with few wrds. Chsing a text that is easy t understand, is brwser friendly, uses apprpriate character cases, allws visitrs t print r share it easily and uses a writing style that is apprpriate fr the target audience, are critical. The infgraphic belw is a gd example that visualizes a century f mtring in America in an easy and understandable manner. 4 P age

5 2. Cnsistency. Cnsistency makes it easier t understand and learn frm infgraphic. This can include psitining f numbers, icns, headings, and layut. Fr example, timelines typically start in the bttm left crner and g up. But the infgraphic abut the evlutin f apple is nt quite cnsistent in this regard ( Hwever, the next infgraphic that cmpares mbile phnes, tablets and cmputers, is a gd example f having cnsistency in presenting the infrmatin and graphics ( 3. Cntent psitining. What d peple expect t see when viewing the infgraphic? Fr example, where t place the mst imprtant cntent? Example belw is a great example f hw designers have put the key message right in frnt f the eyes. 5 P age

6 4. Clur. Chsing clur pallet, which is appealing t yur visitrs is imprtant. Fr example, sme designers use clurs ppsite each ther n the clur wheel. In shrt, be mindful in chsing clurs, fnts, cntrasts and themes and creating the md. Surce: 5. Cding. Cding techniques such as respnsive interactin with user, the use f clur, bject size, shapes and numbers can be used t cnvey the message and gal f yur infgraphic and designate cntent and infrmatin. Cding brings mre than fun; it engages users with data and captivates them by real-time mving facts, graphics and flexible statistics. As an example, the New Yrk Times have released an interactive infgraphic called Hw Many 6 P age

7 Husehlds Are Like Yurs?. Each user can input infrmatin abut their husehld t cmpare it with ther husehlds acrss the United States Surce: ü Strategic implementatin Strategic implementatin has tw -stage prcesses: 1. Testing and Launching: Testing is a critical imprtant part f the implementatin. It will prvide the chance t view and receive feedback n the infgraphic befre it is launched t the general public. It als prvides an pprtunity t ensure user interface functins as intended and allws making pssible changes t enhance the final prduct. It is gd t start testing early and d it ften. Yu can learn frm watching thers interacting with yur infgraphics. Even sitting and watching thers experiences is a valuable practice. 2. Optimisatin. One f the key bjectives f infgraphics is t be seen by thers t make intended impacts. Launching the site is a start pint and nt the final stage. It is imprtant t make sure that yur infgraphic is listed crrectly with search engines and ptimised. Yu can cnsider including a cpy-and-paste embed cde, adding buttns fr scial media sharing (e.g. Facebk, Ggle+, Twitter), and submitting it t article-sharing sites (e.g. Digg, Stumbleupn, Reddit). See mre at: Sme website fr infgraphic design There are a number f websites that allw user create cl infgraphics. Sme f the mst ppular existing services are: Infgr.am, InfActive, Piktchart, Easel.ly, and Many Eyes. These 7 P age

8 websites are designed t help nn-designers create their wn Infgraphics easily. Mst f their services are free unless the users upgrade their accunt fr better custmizatin US electin: a case In Nvember 2012, despite a relatively clse ppular vte, Obama became the president f the United f States. TV news shwed that states went frm white t red (Obama) r blue (Rmney). An interesting infgraphics analysed data frm scial netwrks in particular Twitter t analyse the impact f scial media n electin results. Mrteza Karimi, the designer, created a spreadsheet f keywrds that each candidate used in their Twitter and then graphed them all n a timeline frm Oct 23 t Nv 8. The infgraphic shws that right arund the electin night, Obama-ites inundated Twitter with messages t vte and reminders f the plls. On the ther side, Rmney side pushed tpics like Sandy and FEMA. One cnclusin ut f this infgraphic was that: actinable wrds are a lt mre effective n Twitter than name drps. See mre at: electin-infgraphic/ 3 Read mre: 8 P age