ICS3211 lecture 06
-
Upload
vanessa-camilleri -
Category
Education
-
view
572 -
download
0
Transcript of ICS3211 lecture 06
![Page 1: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/1.jpg)
ICS3211 - Intelligent
Interfaces IICombining design with technology for effective
human-computer interaction
Week 6Department of Intelligent Computer
Systems,University of Malta,
2016
![Page 2: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/2.jpg)
Visual Design for User Interfaces
Week 6 overview:
• Recap class Activity - review literature & critique
• UX vs. UI design
• Best Practices in UI design
• Evolutionary characteristics of design
• Designing for inclusive practices
![Page 3: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/3.jpg)
Learning OutcomesAt the end of this session you should be able to:
• Describe a number of case studies in the design of intelligent user interfaces;
• Draw inferences about the design of interfaces that take into account metaphors, mental models, navigation and interaction;
• Describe the differences between UX & UI design;
• List UI design basics and make inferences about evolutionary design principles;
• Review and make use of different user models for inclusive UIs;
![Page 4: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/4.jpg)
Recap - Case studies: illustrated
• Work in groups
• Choose and review two case studies from the various literature presented
• Present their methodologies and the use of intelligence in the design of user interfaces
• Take into account the metaphors, mental models, navigation and interactions involved in the design of these case studies
![Page 5: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/5.jpg)
UX vs. UI design• UX design - improving usability, ease of use in
the interaction; • UI design - complements UX through look &
feel, presentation and interactivity; • UX designers - concerned with the overall feel
of the product, • UI designers - concerned about how the
product is laid out;
![Page 6: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/6.jpg)
UI Design Basics
Interface Elements:
• Input Controls
• Navigational Components
• Informational Components
• Containers
![Page 7: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/7.jpg)
Best Practices• Keep the interface simple• Create consistency and use common UI elements • Be purposeful in page layout• Strategically use colour and texture• Use typography to create hierarchy and clarity• Make sure the system communicates what is
happening• Think about the defaults
![Page 8: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/8.jpg)
Evolutionary Characteristics for
Design
• Complexity
• Diversity
• Ubiquity
![Page 9: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/9.jpg)
Designing for Inclusive Practices
• According to WHO by 2025, population aged over 60 > 1.2 billion
• Modelling for user (dis-)ability• Existing models include:
• GOMS• KLM• Cognitive Architectures• Grammar based Models• Application-specific Models
![Page 10: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/10.jpg)
User Models
• Perception Model• Cognitive Model• Motor behaviour
![Page 11: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/11.jpg)
User ontology for user profiling
![Page 12: ICS3211 lecture 06](https://reader036.fdocuments.net/reader036/viewer/2022081604/58766c001a28abd0018b5619/html5/thumbnails/12.jpg)
–Rick Rashid
“These devices will eventually replace paper print media. We are reaching a
point in the future where any surface can be an interactive surface.”