This document provides an overview of a university course on visual design for user interfaces. It discusses key topics that will be covered in the course including the differences between UX and UI design, best practices in UI design, and designing for inclusive practices. The course aims to help students describe case studies of intelligent interface design, differentiate between UX and UI design approaches, list basic UI design principles, and review models for inclusive user interface design.

1. ICS3211 - Intelligent
Interfaces II
Combining design with technology for effective human-
computer interaction
Week 6
Department of AI,
University of Malta,
2020

2. 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

3. Learning Outcomes
At 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;

4. 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;

5. UI Design Basics
Interface Elements:
• Input Controls
• Navigational Components
• Informational Components
• Containers

6. 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

7. Evolutionary Characteristics
for Design
• Complexity
• Diversity
• Ubiquity

8. 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

9. User Models
• Perception Model
• Cognitive Model
• Motor behaviour

10. User ontology for user profiling

11. The Self Explanatory
Interface
• Questions
• Answers
• Properties

12. Model Types &
Characteristics
• Borrowing from the
Cameleon
Reference
Framework
• https://www.w3.org/
2005/Incubator/
model-based-ui/wiki/
Cameleon_referenc
e_framework

13. –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.”