Principles of Interface Design. Perception ► Perceptions vary between the developer and the user. ► The user may not be aware of the fine details in a.

Slides:



Advertisements
Similar presentations
Theming for V12 Revolution
Advertisements

RET Optics Research Workshop ”Demos” Dr. Mike Nofziger Professor College of Optical Sciences University of Arizona Dr. Mike Nofziger 2013.
1 Human-Computer Interaction Screen Layout and Colour.
Color Harmony and the Opponent-Process Channel Theory Christina Lewis Psych 159.
GROUPING Organizing Information & Gestalt Principles of Perception.
Color Vision Our visual system interprets differences in the wavelength of light as color Rods are color blind, but with the cones we can see different.
Exam next week Covers everything about all sensory modalities except hearing This includes: vision balance/touch/taste/smell/ proprioception/theroception.
Read Land article for Thursday Test starts Wednesday of next week!!!!
Why use colour? Colour displays are attractive to users and can often improve task performance Benefits: –various colours are soothing or striking to the.
Colour Vision I The retinal basis of colour vision and the inherited colour vision deficiencies Prof. Kathy T. Mullen McGill Vision Research (H4.14) Dept.
Vision Our most dominant sense
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Revision Lesson : DESIGNING COMPUTER-BASED INFORMATION SYSTEMS.
CHAPTER 14 Formatting a Workbook Part 1. Learning Objectives Format text, numbers, dates, and time Format cells and ranges CMPTR Chapter 14: Formatting.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Group 11 Analyzing Bogdan Bele Bianca Bogdan Francesco Brignani Jess Tierney Simona Grigalauskyte Matt Skea Nevena Dobreva.
Module 12 Vision.  Transduction  conversion of one form of energy to another  in sensation, transforming of stimulus energies into neural impulses.
The Visual System: The Structure of the Visual System Module 9: Sensation.
LEARNING GOAL 3.3: DESCRIBE HOW DIFFERENT PARTS OF THE EYE AND BRAIN COORDINATE IN THE VISION PROCESS. Vision.
Vision – our most dominant sense. Vision Purpose of the visual system –transform light energy into an electro-chemical neural response –represent characteristics.
CORE 2: Information systems and Databases COLLECTING AND DISPLAYING FOR DATABASE SYSTEMS.
IT3 Human Computer Interface [HCI] Human Computer Interfaces Factors that should be considered when designing a Computer Interface.
InteractiveMedia’s Imagine Software Platform When user clicks on the Imagine desktop icon or installed app. This is the first thing the user will see full.
Dulcie’s Days. Achromatopsia What does it mean for Dulcie? »Colour blindness – I can see red most of the time. »Low vision. »Extremely light sensitive.
G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher
Principles of Good Screen Design
REQUIRMENTS GATHERING: knowledge of user interface and design.
MarkNotes Question 1 The Human Computer Interface (HCI) is an important part of an ICT system. Describe four factors which should be taken.
The Visual System. The Nature of Light Electromagnetic Spectrum – An energy spectrum that includes X-rays, radar, and radio waves – A small portion of.
.  Sensation: process by which our sensory receptors and nervous system receive and represent stimulus energy  Perception: process of organizing and.
Colour CPSC 533C February 3, 2003 Rod McFarland. Ware, Chapter 4 The science of colour vision Colour measurement systems and standards Opponent process.
 Sensation – stimulation of sense organs ◦ Absorption of energy by sensory organs  Perception – The selection, organization and interpretation of sensory.
Vision Structure of the Eye We only use light energy to see.
Chapter 6 Section 2: Vision. What we See Stimulus is light –Visible light comes from sun, stars, light bulbs, & is reflected off objects –Travels in the.
Perception Sisman LHHS Psychology. The Eye The structures of the eye from the diagram are as follows: –lens: focuses the image onto the retina –pupil:
Vision Part 2 Theories on processing colors. Objectives: The Student Will Compare and contrast color theories (VENN) Explain the Gestalt Theory List your.
Information: Perception and Representation Lecture #7 Part A.
Color Sources and Resources: 1. Hypergraph Hypergraph 2. Frosty Drew Observatory Frosty Drew Observatory 3. User-Centered Web Site Development: a Human-
Design Elements of Graphical Representation, (Factors supporting appearance and functionality of solutions). P0CCUAA.
Human-computer Interaction Source: P.M.Heathcote A Level ICT Chapter 61.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Color, Form and Depth Perception
Chapter Eleven The X Window System. 2 Lesson A Starting and Navigating an X Window System.
Sensation and Perception: Vision Mr. Callens Psychology.
AS Level ICT Health and safety guidelines covering the design and introduction of new software.
The Visual System: The Structure of the Visual System Module 9: Sensation.
1 10 pt 15 pt 20 pt 25 pt 5 pt 10 pt 15 pt 20 pt 25 pt 5 pt 10 pt 15 pt 20 pt 25 pt 5 pt 10 pt 15 pt 20 pt 25 pt 5 pt 10 pt 15 pt 20 pt 25 pt 5 pt SensesVisionHearing.
Users and the Interface When designing an information system you need to have a clear idea of who the target audience is. If the target audience is an.
INFORMATION SYSTEM – SOFTWARE TOPIC: GRAPHICAL USER INTERFACE.
Color and Color for the Web First, discuss idea of color (some overlap with lecture on HVS) First, discuss idea of color (some overlap with lecture on.
Keith Clements Introduction to Neuroscience
Software Interface Design Features / Issues. Learning Objectives Discuss the features affecting interface design.
The Visual System: The Structure of the Visual System.
DO NOW. VisionVision Our most dominating sense. Visual Capture.
MarkNotes Question 1 The Human Computer Interface (HCI) is an important part of an ICT system. Describe four factors which should be taken.
Desktop Publishing Lesson 5 — Enhancing Publications.
GESTALT PRINCIPLES OF VISUAL DESIGN Gestalt principles of visual design are derived from the theories of gestalt psychology, which were applied to the.
Vision Our most dominant sense. Our Essential Questions What are the major parts of the eye? How does the eye translate light into neural impulses?
The Visual System: The Structure of the Visual System Module 9: Sensation.
Sensation. The process by which our sensory systems (eyes, ears, and other sensory organs) and nervous system receive stimuli from the environment A person’s.
Human Computer Interaction
The Visual System: The Structure of the Visual System
Page Design.
Color Theory in Web Design
Additive Colour Theory
Vision.
Perception.
To identify all 5 of Gestalts Laws.
Tips on good web site Design
ICT – “Myself Presentation” Keywords
Presentation transcript:

Principles of Interface Design

Perception ► Perceptions vary between the developer and the user. ► The user may not be aware of the fine details in a GUI, such as the importance of colour or the positioning of icons. ► Likewise the developer may not be fully aware of the users capabilities, wants or needs.

Colour ► The use of colour is extremely important in the design of GUIs. ► Microsoft Office uses grey as the predominant colour, blue for title bars and drop down menus. ► Many users feel this is boring, however if black and red were used it would soon become uncomfortable on the eye.

► Colours affect different people in different ways, some find yellow easier to read, others find it fuzzy. ► Users with dyslexia may be affected by colour in different ways, as would users who are colour blind ► GUIs with 3D effect are based on the Trichromatic system (the combination of the 3 colours that are basis of 3D vision: red, blue and green)

Luminance ► The three colours of the trichromatic system are detected by three different types of cells on the retina of the eye (receptors). ► These signals are opponent colour channels because they relay information about opposite colours. ► The theory states there is a hierarchy of luminance, red-green, yellow-blue, black- white, early colour parings cannot effectively display detail.

Why is yellow text on a white background difficult to read Where as blue on a white background is not.

Pop out effect This is used where there are a lot of symbols or imagery and one is required to stand out. This can be done by: ► Aligning differently ► Colouring differently ► Adjusting to a different shape. Preattentive Processing Theory

Pattern ► Microsoft uses a template for its dialog boxes. It provides consistency and evenness (symmetry) ► It aids he way the user relates to the interface, providing user friendliness, consistency and ease of use (connectedness). ► Consistency helps the user to feel comfortable with what happens next (save as – dialog box – file name – location) – Home button in the same place, links to websites underlined in blue, etc.

Gestalt Laws Gestalt laws have been formulated to describe our pattern perception and form rules for our designs: Proximity: we view things which are close together as a group. Continuity: smooth continuous lines are more easily interpreted than rapidly changing lines. Symmetry: we see symmetrical shapes easier than unsymmetrical shapes. Similarity: we see similar objects as a group, dissimilar objects tend to be viewed as individuals.

Positioning Positioning and layering are vital. If not parts of the GUI may appear behind the main screen and the user may not be able to access a full range of commands. Objects need to placed in a hierarchical system. If images are sitting behind or in front of other images then the entire interface will not be visible.