p. 1

vijeo designer® design guide how to create successful screens 10 stages for successful hmi design hints and tips at each stage you will find advice and design rules to follow in this section to obtain the best result hmi the hmi -human machine interface is a means of communication between the user and the machine and acts as an interpreter the hmi adapts the logic of the machine to that of the user to avoid any misinterpretation during exchanges of information 1 define the architecture identify,organise,name 2 structure the content createthemenus method to successfully design and build effective professional hmis it is important to follow the stages described in this design guide step by step 3 establish the principles for navigation organisetheaccesspaths 4 structure the page layout definethepagetypologies 5 create content buildtheblockdiagramonthehomepage 6 add dynamics choosebuttonsandactivezones 7 highlight useicons,picturesandcolours 8 make it legible adjustlightandcontrasts 9 create texts and dialogue tools makethemlegibleandvisible 10.create a dialogue box createclearmessages www.schneider-electric.com

[close]

p. 2

1 define the architecture hints and tips architecture organise the content to help the user find what he or she is looking for quickly vijeo designer® design guide how to create successful screens classify the most useful information first classify the levels of information in order of importance from the user s point of view identify the content ·makeaninventoryofallthefunctionalitiesrequiredforyourapplicationto function ·predictallthepossiblesituationswhichmayarise,consideralltheuses whichmaybemadeofthehmiandgiveaprecisedescriptionofallthe possiblesituationswithwhichtheapplicationwillbeconfronted:installation servicing,maintenance,restarting,changeofprocedure,etc method 1 identify the content which will be displayed in this interface 2 categorise organise the content into similar functions 3 name the groups of functions itisimportanttocompile a comprehensive list of the situationsinorderto createalogicalarchitecture:addingaforgottenfunctionatalaterstagemay unbalancethearchitectureandcomplicatenavigation categorise ·createfunctionalgroups,organisethemintoclassesofsimilarfunctionsor tasks.e.g.diagnostics,alarms,manualcommands,settings,etc ·alsolistthesub-groupswhichexistwithinthecategories.e.g.allthe actionsanddatawhichwillcontributetothediagnosis ·includeahomepage.ifthispageincludesablockdiagram,markthe locationswherethefunctionsmaypotentiallybeactivated 1 name ·namethegroupsoffunctions.thenamesselectedforthesefunctionswill makeupthemenusofthehmi ·choosinganamewhichisfamiliartotheusers­andnottothedesigner-is moreeffectiveforunderstandingandrecognition.thecloserthenameofthe categoryistotheuser suniverse,themorerelevantthehmiwillbe,asthe userwillnotwastetimelookingforfunctions a1 a1 2 3 g1 g1 c2 c2 c1 c1 b1 a1 a3 a3 b2 b b2 f1 1 b3 b3 d2 d2 d1 d1 e1 e1 a1a2 a2 e2 ee3 2 e3 f1 f2 f2 www.schneider-electric.com 02

[close]

p. 3

2 structure the menu content hints and tips create the tree structure make the information accessible in 3 clicks finalise the menus vijeo designer® design guide how to create successful screens menus organise the groups of functions into a logical structure and use this to create menus create the tree structure ·buildthestructure,organisingthemenusintoatreestructure.thisstage involvesdefiningtheaccesspathtoeachofthefunctions method create the tree structure organise the information into a logical tree structure in which the user will find his or her familiar universe make the menus comply with the 7 by 3 rule to make the information accessible in 3 clicks create the menus ·complywiththe 7 by 3 rule a1 a2 a3 a4 b1 b2 b3 c1 c2 d1 d2 e1 e2 e3 f1 f2 g1 g2 h1 once these menus are defined they never change and appear on every screen in the same position establishatreestructurebasedonthenamesofthecategoriespreviously defined,complyingwitha maximum of 7 horizontal levelsand 3 levels deep theinformationisthusavailablein3clicks click b1 a1 a2 a3 b2 b3 c1 c2 start d1 d2 e1 e2 e3 click f1 f2 click finish g1 www.schneider-electric.com 03

[close]

p. 4

3 establish the principles for navigation hints and tips at all times the user must be able to log in or log out access the home page switch function or task move to the previous or next step change page within the same task access the generic navigation functions situate him or herself clearly vijeo designer® design guide how to create successful screens navigation define the elements authorising the links between the screens and allow the user to move easily from one to the other during this stage access to the machine s functions is constructed so that the user always knows where he/she is where he/she has come from and where he/she can go do not use scrolling list the navigation elements thesearealltheelementsusedtoaccessinformationregardingthesystem orthemachine.theymustmakeitpossiblefortheusertopositionhim herselfandfindhis/herupstreamanddownstreampathatalltimes,i.e.to knowhis/herpositionintheinterfaceatalltimes method 1 list the navigation elements 2 group the main navigation elements in the main menu 3 place the generic functions in the upper bar 4 choose from the components library the words symbols and icons used to navigate from the bars and/or block diagrams see chapter 5 create the access paths group together the main navigation elements example of navigation zones upper bar theyareusedtomovefromonefunctiontotheotherandaretypicallyfunctions suchas:commands,alarms,etc.theyareplacedinthemainmenu place the generic functions theycorrespondtothesystem sinternalfunctionssuchas:accesstohelp connection,language,etc.theyaregenerallygroupedintheupperbarwith thetitleoftheapplication,thelogoorthebrandandthestatusbarzone displayingtheconfiguredmode,statusoftheinstallation,timeandanyalerts content main menu choose the components thearrowssymbolisingthepreviousscreenornextscreenfunctionsare takenfromthelibrary.theyoftenappearoneithersideofthecontent.there isnoscrollbar.longitemsofinformationarespreadoverseveralscreens andcanbeaccessedusingthepagebuttons thehomepagecanbeaccessedeitherfromthemainmenuortheupper barinthegenericfunctionsgroup www.schneider-electric.com 04

[close]

p. 5

4 structure the page layout hints and tips page layout organise the permanent elements on the page in logical way and finalise the locations vijeo designer® design guide how to create successful screens define the page typologies allow an obvious visual distinction to be made between the different kinds of zones or functions keep the same page layout from one page to another define the page typologies identifythetypologies:homepage,functionpage,windowpage,etc method 1 define the page typologies 2 define the page layout choose the locations for the fixed or repetitive elements which will be set once and for all for each page typology define the page layout makeaninventoryofallthefixedorrepetitiveelementstoappearonthe pages -upperbar:logo,statusbarandgenericfunctions -content -mainmenu generic functions status bar logotype keep the same page layout from one page to another auto stop 11:24:08 minor anomaly logotype 3 2 1 statistiques de production main menu contents ·rigorousnessinthecompositionofthepagelayoutensuresconsistency fromonepagetoanother,andthereforealegible,clearinterface ·strictconsistencyfromonepagetoanotheraidsmemorisationandallows theusertocreatehabitsquickly.workingismorepleasantandoperations quicker www.schneider-electric.com 05

[close]

p. 6

5 create content the block diagram hints and tips use a realistic view corresponding to what the user actually sees place the diagram of the machine or the block diagram in the content space on the home page restrict the number of active zones and place them far enough apart to facilitate touch navigation vijeo designer® design guide how to create successful screens block diagram the block diagram in the form of a photograph or a drawing allows all the functions of the machine to be viewed at a glance you are advised to use it on the interface home page as an introduction it can be interactive i.e give direct access to certain tasks or functions the active zones of the diagram give access either to a page giving details of part of the machine a function or task concerning the zone selected on the machine choose the illustration ·choosetheillustrationfromthelibraryoruseyourimageafterinsertingit intothelibrary ·optfortheuser sviewpointifpossible ·definetheactivezones ·differentiatethezonesvisuallyusingcoloursorfillpatterns ·useneutralshadestoavoidinterferingwiththeclickableelementsgiving machinestatusinformationand/oroperatinginformation physical representation of the installation method select the illustration diagram or photo which is most realistic for the operators 2 2 co nt in uo us 2 pr od uc 2 ti on define the active zones and differentiate them visually from those which are not 2 2 ma c n hi e pr od uc ti on 2 s ta ff ro om 2 of fi ce s 2 the active zones must not overlap or be superimposed 2 2 2 2 the resolution of the imported image must be at least equal to the screen resolution in number of pixels logical representation of the installation 640x480 640x480 instantaneous cd average cd www.schneider-electric.com 06

[close]

p. 7

6 add dynamics dynamics the commands are executed using buttons or active zones which are dynamic elements of the hmi they authorise movement within the hmi and give access to all the information vijeo designer® design guide how to create successful screens hints and tips assign a single button to each command remain consistent and uniform the same command is always activated with the same button located in the same place consistency with regard to the size shape status or type of button place the commands sufficiently far apart to avoid operating errors choose the button ·alwayschoosethesamebuttonforthesamefunction:identical appearance,size,shapeandcolour ·adjustthesizeofthebuttontoitscontent,textoricon ·ensureyouchooseonewhichcorrespondstothesizeofyourscreen,of atleasttheminimumsizerequiredtoensurevisibility ·complywithgoodusagepractices -tabulation:useatextbuttonwiththenameoftheselectedfunction -returntothehomepage:textbuttonoriconbutton -navigationtonextandpreviouspages:arrowbuttons -pagingwithinthesamefunctionwheninformationisspread overseveralpages:pagenumber -validationorconfirmation:buttonswithok/canceloryes/no method 1 select the buttons in the library according to type text icon validation etc and their size look in the library for the size of button suitable for the label you wish to give it 2 determine the active zones and adjust their size to the selectable object the appearance of the button or zone reveals its status in raised relief for an enabled button in sunken relief for an activated button greyed out for a disabled button framed zone active zone 0,05 0,05 à renseigner à renseigner define the active zones placetheclickablezonesfarenoughaparttoensuretheydonotoverlap asusersoftenweargloves -calculateaspaceof20mm minimumbetweenthecentresofeach buttonoractivezone -ensurethereisaspaceof5mm minimumbetweenthebuttons -offerastylusifthetouchscreenistoosmalltoallowthe recommendedsizeofbuttontobeused enabled stop activated àr stop disabled space 20 mm minimum between the centres of the active zones stop minimum 5 mm space text button minimum 5 mm space text button www.schneider-electric.com 07

[close]

p. 8

7 highlight image colour hints and tips highlighting the icons images and colours are the static elements used to aid understanding or illustrate a concept they improve both the visibility of the elements and their legibility vijeo designer® design guide how to create successful screens limit the use of icons to standard functions e.g home help etc adapt the illustration to the size of the screen limit the number of colours to 5 or 6 ensure your colour code is consistent select the colours ·highlightthedynamiccontentusingcolour,limiting yourchoiceto a maximum of 5 or 6 colourstoavoida rainbow effect usethemeaningofthestandardcolourcodes ·createyourowncodewiththesamecolourforthesametype ofapplication.thiscodemusthaveclearmeaningfortheuserwith noambiguity use of a colour to reveal important information auto stop method recover from the library the vectorial images the icons dedicated to the hmi use colours to make the titles stand out or to attract attention to the alarm or malfunction buttons use the common sense colour codes green for normal operation on orange/yellow for alerts red for faults and off blue for non-critical information 11:24:08 minor anomaly logotype production stastistics production statistics 100 75 50 25 data lter procedure 01 procedure 02 procedure 03 procedure 04 st01 st02 st03 application of the status colours validé attention erreur to the icons alarme erreur information ok alerte alarme information procedure 05 june 2010 status colour references ok validated alert warning alarm error message information status preview example four colour printing cyan magenta yellow black pantone® screen display red green blue web hexadecimal ok alert error information 78 0 0 75 0 10 84 0 100 92 75 0 0 0 0 0 warm red c 298c 0 255 231 66 172 222 71 180 40 0 60 230 #00ac28 #ffde00 #e7473c #42b4e6 www.schneider-electric.com 08

[close]

p. 9

8 make it legible adjust the contrasts hints and tips opt for a dark text on a light background always test the choice of colour vijeo designer® design guide how to create successful screens contrasts the levels of contrast improve the legibility of the information and allow you to use the intensity of the colour to make it stand out better test the choice of colours online ·checkthatpeoplewithcolour-blindnesscandistinguishbetweenthe colourssufficientlywell:vischeckurletcolorvision ·checkthecolourharmonies:colorschemedesigner ·validatethecolourcontrastbyenteringthecolourreferenceforthe foregroundandthatofthebackground:colorcontrastcheck result of a colour contrast check test method use a font with dark letters on a light background adjust the contrasts opting for neutral tones and low contrast for the static elements coloured shades and stronger contrasts for the dynamic elements adjust the shades in the foreground and background to give maximum legibility text colour text colour white background colour se dark gray background colour se sky blue text colour se sunflower yellow text colour black background colour se spruce green background colour se sky blue e sunflower yellow www.schneider-electric.com 09

[close]

p. 10

9 create texts and dialogue tools hints and tips the background adopt the user s vocabulary only provide information which is directly useful the form use normal characters neither animated text nor texts consisting solely of capitals or italics adjust the size of the characters to the reading distance vijeo designer® design guide how to create successful screens texts and dialogue tools the texts give the user the information he/she requires at the right moment the dialogue tools guide the user in the dialogue by distinguishing the clickable elements from those which are not create texts which are easy to read ·writeshort,precisetexts,reducedtothebareessential ·bepositiveforquickcomprehension ·optfortheactiveform,whichisdirectandunambiguous ·remainfocusedonthetasksandfunctions method use a consistent structure and vocabulary it is important to remain consistent with the rest of the interface adapt the size of the characters to the content of the information and the ease with which it can be read at a distance distance 50cm interaction parameters settings navigation distance 50cm viewing control information monitoring create the dialogue tools there are 3 interaction button ok type or navigation button input field for customising on a white background numerical and alphanumerical keyboards always offer the possibility to correct data make the dialogue tools legible and visible ·differentiatethedialoguetoolsbythebackgroundcolour -white:active,toallowavaluetobechanged -grey:disabled,tobechosenwhentheinformationmustnotbemodifiedby theuser ·indicatethenumericalkeyboardbyapop-uprepresentingakeyboard andselectthenumericaloralphanumericalkeyboarddependingonthetype ofdatatobeinput adjust the size of the font to suit the reading distance distance less than 50cm interaction 50cm aabb012345 a height 3mm distance greater than 50cm viewing 50cm 80cm april2010 1 a q w 2 z s x 3 e d c 4 r f v 5 t g b 6 y h n 7 u j 8 i k 9 o l 0 p m aa012 a aa height 3,5mm 80cm 125cm space return ok 125cm a height 4,5mm cancel a a www.schneider-electric.com height 6mm 10

[close]

p. 11

10 create a dialogue box hints and tips dialogue box a dialogue box opens when the user makes an error or the system detects that the machine is not operating correctly they allow the system to dialogue with the user by informing him/her of an error an alarm some information or a validation message vijeo designer® design guide how to create successful screens do not use abbreviations or cut words only provide information which is directly useful ensure that opening the window does not interrupt the task ensure the interface returns to the previous screen when the dialogue box closes choose the message theerrormessage:beexplicit,andgobeyondsimplyinformingtheuser oftheanomalybyofferingasolution thealarmmessage:usedtoinformtheoperatorofabnormaloperation ordirecttheusertowardsasolution theinformationmessageisusediftheuserneedstotakeanewelement intoaccount:e.g.ifanewactionisavailable thevalidationorconfirmationmessagewarnstheuserthathis/heraction hasbeencorrectlytakenintoaccount:e.g.adeletion method 1 construct a standard dialogue box with the fixed elements shape size of window position and size of the pictograms the buttons and the text zone 2 create the 4 screens for the dialogue boxes error alarm information validation 3 write messages according to the usage contexts incorrect value please re-enter the value using the keyboard the conveyor belt at station 5 is jammed check that no object is blocking it further information further information ok ok the con guration data has been taken into account ok do you want to change the equipment settings further information no yes create texts which are easy to read ·beaffirmativeforquickcomprehension ·optfortheactiveform,whichisdirectandunambiguous ·remainfocusedonthetasksandthefunctions ·beconstructiveandnon-critical ·writecompletemessages,withoutcuttinganywordsorabbreviating unlessyouofferaccesstomoredetailbyviaasuitablebuttondetails,more info,etc www.schneider-electric.com 11

[close]

p. 12

vijeo designer® design guide how to create successful screens find out more how to avoid operator errors to avoid input errors -displaytherelevantunitofmeasurement -givethemaximumlengthoftextwhichcanbeinput to confirm an action -giveimmediatefeedback,withavalidationmessage -givetheprogressstatusofaprocesscurrentlyrunning how to ensure the operator is always in control always include the ok functiontostartaprocess,confirm anorderorafterenteringdata give the user the possibility to cancel interrupt or delete bibliography >thedesignofeverydaythings-donald a norman >don tmakemethink:acommonsenseapproachtowebusability ­steve krug >usabilityengineering-jakob nielsen >designingtheuserinterface:strategiesforeffectivehumancomputerinteraction-ben schneiderman-5thedition >inmatesarerunningtheasylum:whyhigh-techproductsdrive uscrazy&howtorestorethesanity-alan cooper >designinginteractions-bill moggridge >aboutface3:theessentialsofinteractiondesign-alan cooper robert reimann and david cronin >designingforthedigitalage:howtocreatehuman-centered products&services-kim goodwin www.schneider-electric.com 12

[close]