Interface Guidelines & PrinciplesInterface Guidelines & Principles

Consider Function FirstConsider Function First

Presentation LaterPresentation Later

Interface Guidelines & PrinciplesInterface Guidelines & Principles

7 principles for Interface Design7 principles for Interface Design1.1. Focus on the users & tasks, not technology.Focus on the users & tasks, not technology.

2.2. Conform to the User’s View of the Task.Conform to the User’s View of the Task.

3.3. Consider function first, presentation later.Consider function first, presentation later.

Function 1Function 1stst, Presentation Later, Presentation Later

Does NOT meanDoes NOT mean– Get the functionality designed and implemented Get the functionality designed and implemented

first and worry about the user interface later.first and worry about the user interface later.

– The word function here refers to The word function here refers to implementation. Get the system/prototype implementation. Get the system/prototype functioning first.functioning first.

– Do NOT write code before you have considered Do NOT write code before you have considered the user interface’s function.the user interface’s function.

Function 1Function 1stst, Presentation Later, Presentation Later Does meanDoes mean

– What concepts will the software expose to users?What concepts will the software expose to users? Are the concepts new, familiar?Are the concepts new, familiar?

– What data will users work with?What data will users work with? What information does the data provide?What information does the data provide? Where does the data come from?Where does the data come from?

– What are the options the system will have?What are the options the system will have? Adaptive, personalization, direct-manipulation.Adaptive, personalization, direct-manipulation.

– Function means Role. What is the role of the software.Function means Role. What is the role of the software.

Two Views of FunctionTwo Views of Function

User versus DesignerUser versus Designer

User Mental ModelUser Mental Model

User’s view of the system.User’s view of the system.– System and its function.System and its function.– Expectations of the users.Expectations of the users.

Conceptual ModelConceptual Model

Model of the product that the designer wants the Model of the product that the designer wants the user to understand.user to understand.– Designer’s view of the product.Designer’s view of the product.

Expressed in terms of the concepts of the intended Expressed in terms of the concepts of the intended user’s task domainuser’s task domain– Data and how, when, where it will be used.Data and how, when, where it will be used.– In most cases, this is NOT an interface drawing.In most cases, this is NOT an interface drawing.

Explains the function of the software and what Explains the function of the software and what people need to be aware of in order to use it.people need to be aware of in order to use it.

Conceptual Model vs. Mental ModelConceptual Model vs. Mental Model

UNIX operating system. Rename a file.UNIX operating system. Rename a file.

Conceptual Model is to use mv.Conceptual Model is to use mv.– This moves a file, simplifies the need for another This moves a file, simplifies the need for another

command.command.

User Mental ModelUser Mental Model– User wants to rename, rn or re not move the file.User wants to rename, rn or re not move the file.

Developing a Conceptual ModelDeveloping a Conceptual Model

1. Object/Action Analysis1. Object/Action Analysis

Define all of the objects.Define all of the objects.– Nouns.Nouns.

Define all of the actions.Define all of the actions.– VerbsVerbs

2. Lexicon or Ontology2. Lexicon or Ontology

OntologyOntology– A common vocabulary for a specific domain.A common vocabulary for a specific domain.– Learn the users’ vocabulary and introduce yours.Learn the users’ vocabulary and introduce yours.– Agree upon a common use of terms.Agree upon a common use of terms.

3. Scenarios3. Scenarios Task ScenariosTask Scenarios

– Scenario developmentScenario development Participatory vs. Designer (Conceptual Model)Participatory vs. Designer (Conceptual Model)

– ParticipatoryParticipatory Users are involved in the design of the scenarios.Users are involved in the design of the scenarios.

– Designer based scenariosDesigner based scenarios Designer uses conceptual model to develop scenarios.Designer uses conceptual model to develop scenarios. Conceptual Model = Mental Model???Conceptual Model = Mental Model???

3. Scenarios3. Scenarios

Scenario ImplementationScenario Implementation– System ModelSystem Model

System architecture: device + data flowSystem architecture: device + data flow

3. Scenarios: System Model3. Scenarios: System Model

3. Scenarios3. Scenarios Scenario ImplementationScenario Implementation

– System ModelSystem Model System architecture: device + data flowSystem architecture: device + data flow

– Scenario CasesScenario Cases Goals, Objects, Actions, Time, etc.Goals, Objects, Actions, Time, etc.

Developing a Conceptual ModelDeveloping a Conceptual Model

1.1. Object and Action AnalysisObject and Action Analysis

2.2. Lexicon or OntologyLexicon or Ontology

3.3. ScenariosScenarios

Mental Model = Conceptual Model

Cartoon by Mark Parisi. Used by special permission.

Benefits of Conceptual ModelBenefits of Conceptual Model

Identifies actions that are shared by many objects.Identifies actions that are shared by many objects.

Forces the designer to think about the user.Forces the designer to think about the user.

Ontology allows designer to communicate with the Ontology allows designer to communicate with the users.users.

Conceptual Model will conform to User’s Mental ModelConceptual Model will conform to User’s Mental Model

In Class ExerciseIn Class Exercise

Scholarship search engine from Assignment Scholarship search engine from Assignment #1.#1.

Develop a conceptual model for the scholarship Develop a conceptual model for the scholarship search engine.search engine.

Human FactorsHuman Factors1.1. LanguageLanguage

1.1. English, Spanish, Chinese, etc.English, Spanish, Chinese, etc.

2.2. Vocabulary, OntologyVocabulary, Ontology

2.2. ColorsColors

3.3. LayoutLayout1.1. Focus the user’s attentionFocus the user’s attention

4.4. Etiquette and ToneEtiquette and Tone1.1. Tone: Serious versus PlayTone: Serious versus Play

2.2. Non offensive designNon offensive design

5.5. Special RequirementsSpecial Requirements1.1. DisabilitiesDisabilities