User Interface Design SEII - Lecture 11

User Interface DesignSEII-Lecture 11Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.RecapDesign, goal of design, design process in SE context, Process of designQuality guidelines and attributes Evolution of software design processProcedural, object-oriented, aspect-orientedDesign conceptsAbstraction, architecture, pattern, information hiding, separation of concerns, refactoring, design classes2ImportanceAlmost all products require human interactionEither digital music player or weapon control systemSuccessful product must have good usabilityWell designed interfaces to do work effortlesslyIf poor usability, frustration, and users give up Usability was not dominant for first three decadesTechnology that conforms to people rather than people are required to conform to technology3Product Should beUsefulAccomplish what is requiredPlay music, cook dinner, format a documentUsableDo it easily and naturallyWithout danger of errorUsedPeople want to use itBe attractive, engaging, fun4The Golden RulesProposed by T. Mandel in 1997Place the user in controlReduce the user’s memory loadMake the interface consistent5Place the User in Control [1/3]Define interaction modes in a way that does not force a user into unnecessary or undesired actionsInterface mode is the current state of the interfaceExample: Spell-check in a word-processor menuUser should be able to enter or exit the mode with no or little effortProvide for flexible interactionUsers preferences are differentExample: keyboard, mouse etc.Every action is not supported by every interaction mechanism6Place the User in Control [2/3]Allow user interaction to be interruptible and undoableUser should be able to interrupt Even in a sequence of actions, without losing the work doneUser should have “undo” option Streamline interaction as skill levels advance and allow the interaction to be customizedSame sequence of interactions repeatedlyAdvanced users may customize the interface7Place the User in Control [3/3]Hide technical internals from the casual userUser should not be aware of technical detailsUser should not work at “inside” levelExample: OS commands from within other softwareDesign for direct interaction with objects that appear on the screenUsers prefer direct manipulationVirtual objects should behave like physical objectsExample: Stretching the object8Reduce the User’s Memory Load [1/3]Reduce demand on short-term memoryComplex task may lead to memory loadInterface should reduce the requirement to remember past actions, inputs, and resultsEstablish meaningful defaultsInitial defaults should make sense for average userUser preferences“Reset” option9Reduce the User’s Memory Load [2/3]Define shortcuts that are intuitiveShortcut keysEasy to rememberExample: Ctrl + CThe visual layout of the interface should be based on a real-world metaphorSimilar terms as of real worldUser rely on well-understood visual cuesExample: Printer icon10Reduce the User’s Memory Load [3/3]Disclose information in a progressive fashionInteraction should be organizedLevel of abstractionsExample: Printer preferences11Make the Interface Consistent [1/2]Allow the user to put the current task into a meaningful contextComplex layers of interaction with multiple screen imagesIndicators should be providedUser should know the contextAlternatives should be knownMaintain consistency across a family of applicationsA family should implement same design rulesExample: Microsoft office12Make the Interface Consistent [2/2]If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do soDe facto standardsChange will cause confusionExample: Ctrl + C13User Interface Analysis and DesignInterface analysis and design modelsFour different design modelsUser modelDesign modelUser’s mental model / system perceptionImplementation modelThese models may differ significantlyNeed to derive consistent representation of the interface14Types of UserNoviceNew userNo syntactic knowledge of the systemLittle semantic knowledge of the application / computer usageKnowledgeable, intermittentReasonable semantic knowledgeRelatively low recall of syntactic knowledgeKnowledgeable, frequentGood syntactic and semantic knowledgePower user15User’s Mental Model and Implementation ModelUser’s mental model Image of the system that end users carry in their headsSystem perception / how it will perform certain tasksAccuracy of description depends on user’s profileImplementation modelLook and feel of the interfaceAll supporting information e.g. help filesUser’s mental model and implementation model should be synchronizedKnow the user, know the tasks16Analysis and Design ProcessIterative processInterface analysis and modeling Interface designInterface construction Interface validation17Analysis and Design Process18Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 319Analysis and Design ProcessInterface analysisFocus on user profilesSkill level, business understanding, and general receptiveness to the new systemRequirements elicitation for each user profileTask analysisPhysical work environment concernsPhysical locationUser position while interacting with the systemOther constraints e.g. noiseAnalysis model is developed19Analysis and Design ProcessInterface designSet of interface objects and actions and their screen presentationsUser should perform all the intended functionsEasy to use system / good usabilityInterface constructionCreation of a prototypeReflection of usage scenariosUser interface toolkit20Analysis and Design ProcessInterface validationImplementation of every user taskAccommodation all task variationsEase to use, easy to learnUser’s acceptance21SummaryImportance of user interface designUseful, useable, usedThree golden rules Place the user in controlReduce the user’s memory loadMake the interface consistentAnalysis and design processInterface analysis and modeling Interface designInterface construction Interface validation22