HCI Web Application (Theory)

Web ApplicationLearning Outcome4.2.1 Describe the differences between web applications and native applications.4.2.2 State and apply usability principles in the design of web applications. Awebapplicationisanapplicationstoredataremoteserverthatrequiresawebbrowserasaclient to run and internet for data/resource transfer. Whereas,a native/desktopapplicationis an applicationdesignedto servestandalonemachinesthatdon’t requiretheinternetforitsoperation.ExampleofdesktopapplicationsareMicrosoft Words, Microsoft Excel, Notepad. Web Applications Native Applications/Desktop Application Deployment and maintenance (updates) for aweb-based application require deployment ona single set of server machines. Deployment and any maintenance/patch aredone on individual client machinesseparately. Web applications can be accessed fromanywhere (most locations), so there is nolocation constraint. As desktop are confined to a standalonemachine, so they can be only accessed fromthe machines they are deployed in. Web applications are platform-independent,they can work in different types of platformswith the only requirement of a web browser. Desktop applications need to be developedseparately for different platform machines.(Windows, Linux, Unix, Mac etc) Web applications are at higher security risksas they are inherently designed to increaseaccessibility. Desktop applications, on the other hand,have better authorization and administratorshave better control, hence more secure. Web applications rely heavily on internetconnectivity, fortheiroperation. Desktop applications don’t require theinternet for their operations. Someapplications just require internet connectivityat the time ofupdates. Web Application Usability Principles

Webapplicationsaredesignedtoprovideaccesstoinformationandservicesforavarietyofusersfromdifferentbackgrounds.Usabilityisoneimportantfactorforthequalityofawebapplication. It is defined by 5 quality components:● Learnability:whentheusersfirstencounterthewebapplication,howeasyisittolearntonavigate in the system to perform basic tasks?● Efficiency: how fast can the users perform tasks after knowing the system?● Memorability:if theusershavenotusedthesystemfora longtime,howeasyisit torecall the functionality of the system without relearning?● Errors:possibleerrorsthatusersmake,andhowthesystemhelpuserstorecoverfromerrors?● Satisfaction: how pleasant is it for use? Webapplicationsareproductswithoutmanualsandwedon’t expectpeopletobepatienttofigureouthowtheapplicationworks.It hasbecomeaverypopularmarketingplatformforbusinessandcompaniesputusabilityon toppriorityto attractcustomers.Onlineretailwebsite also needs to be explicit and easy to use for more efficient transactions.Human-computerinteractionexpertshas developedplentyof principles,Nielsen’s 10principles,Norman’s rules,Tognazzini’s 16principlesandShneiderman’s 8 goldenrules.Theycoversalltheimportantrulesbutdiffersinthewayhowrulesareorganized.Herewewill discuss Nielsen’s 10 principles developed by Jacob Nielsen and Rolf Molich in 1990.(Resource:https://www.nngroup.com/articles/ten-usability-heuristics/) 1. Visibility of System StatusThesystemshouldalwayskeepusersinformedaboutwhatisgoingon,throughappropriatefeedback within reasonable time.Forexample,whenweuploadafileintoGoogleDrive,thecolourchangeshowstheprogressand the message above shows time left to complete the task. An online flight search engine uses a loader to show the progress while users are waiting.

2. Match between system and the real worldThesystemshouldspeaktheusers'language,withwords,phrasesandconceptsfamiliartothe user, ratherthansystem-orientedterms.Followreal-worldconventions,makinginformation appear in a natural and logical order.3. User control and freedomUsersoftenchoosesystemfunctionsbymistakeandwillneedaclearlymarked"emergencyexit"toleavetheunwantedstatewithouthavingtogothroughanextendeddialogue.Supportundo and redo.Forexample,anonlineshopallowstheusertoadjustthenumberofitemstopurchase,andeven to remove the item by clicking the cross sign. The attachment in Gmail can easily be removed as well. IftheuseraccidentallyclickedthebuttontodeleteapostinGoogleClassroom,thesystempopup message allows undo of this action. If we accidentally deleted an email, it is possible to undo the process to retrieve the mail.

4. Consistency and standardsUsersshouldnothavetowonderwhetherdifferentwords,situations,oractionsmeanthesame thing. Follow platform conventions. Forexample,twohotelbookingwebsitebelowbothputcurrencychoicesandloginoptionson thetoprightcorner. Theformto fillin is on theleftsidewhileadvertisementsorpromotions are on the right side. 5. Error preventionEvenbetterthangooderrormessagesisa carefuldesignwhichpreventsa problemfromoccurringinthefirstplace.Eithereliminateerror-proneconditionsorcheckforthemandpresent users with a confirmation option before they commit to the action.

For example, Google search offers the correct word for my wrong spelling. Whentheusersendsanemailwithoutthesubjectortext,thewebmailapplicationwillpopout a message for correction. 6. Recognition rather than recallMinimizetheuser'smemoryloadbymakingobjects,actions,andoptionsvisible.Theusershouldnot haveto rememberinformationfrom onepartof thedialogueto another.Instructionsfor use of the systemshouldbe visibleor easilyretrievablewheneverappropriate.For example, a mobile web application shows past search history for users to retrieve. Another example is a search engine which offers suggested contents to the user.

7. Flexibility and efficiency of useAccelerators—unseenbythenoviceuser—mayoftenspeeduptheinteractionfortheexpertusersuchthatthesystemcancatertobothinexperiencedandexperiencedusers.Allowusersto tailor frequent actions.Forexample,anexperienceduserwillexplorethetoolstosearchforwebpagespublishedwithin certain period of time. 8. Aesthetic and minimalist designDialoguesshouldnotcontaininformationwhichisirrelevantorrarelyneeded.Everyextraunitof informationin a dialoguecompeteswiththerelevantunitsof informationanddiminishes their relative visibility.Examples includes search engines: University and government websites:

9. Help users recognize, diagnose, and recover from errorsError messages shouldbe expressedin plainlanguage(nocodes),preciselyindicatetheproblem, and constructively suggest a solution. Whentheuserentersawronglogininformation,themessageisshowninred.Afewoptionsaregiventotheusertoresolvetheproblem:eitherre-enterthecorrectaccount,orsigninviaFacebook or Google, or click the link ‘I forgot’ to trace the password. 10.Help and documentationEventhoughitisbetterifthesystemcanbeusedwithoutdocumentation,itmaybenecessarytoprovidehelpanddocumentation.Anysuchinformationshouldbeeasytosearch,focusedon the user's task, list concrete steps to be carried out, and not be too large.