Putting them together screen layout and design  basic principles  grouping, structure, order  alignment  use of white space.

Slides:

Advertisements

Similar presentations

The Web Wizards Guide to HTML Chapter Six Tables.

Advertisements

Good Vs. Bad UI & Oakley Airwave 1.5 Sean Gergen & Derik Wright.

interaction design basics

LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,

Lesson 2 — Working with Text

Chapter 5 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

WHITE SPACE and USER INTERACTION Ebuba Udoh Idris Kargbo Linda Mensah

Designing Pages and Screens Comm Arts II Mr. Wreford.

APPROPRIATE APPEARANCE Presented by Joyce Nganga Edwina Odiwanor Mohammed Lamine Konate.

Lecture Interaction Design Basics– Part II. Today’s Outline Basic principles Grouping, structure, order Alignment Use of white space.

PowerPoint: Tables Computer Information Technology Section 5-11 Some text and examples used with permission from: Note: We are.

DESIGNING DOCUMENTS And page layout. What is document design?  Refers to page layout, that is, where the visuals and information are placed on a page.

HCI User Interface.

14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.

interaction design basics

Tonga Institute of Higher Education IT 141: Information Systems CS Students Lecture 2: Microsoft Word.

Chapter 5 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

Design 2 Screen Layout and Design (from Dix et al) Quite a bit of this is Language and culture dependent, Internationalization brings a whole new set of.

Business Correspondence Documents II. Agenda A list of things to be done or actions to be taken, usually at a meeting.’

screen design and layout

Understanding users. Objectives  Gestalt Principles of Perception  Design principles  Development activity.

CENG 394 Introduction to Human-Computer Interaction CENG 394 HCI interaction design basics.

บทที่ 6 การออกแบบปฏิสัมพันธ์ระหว่าง ผู้ใช้ และคอมพิวเตอร์ (Human–Computer Interaction Design) Human and Computer Interaction By Juthawut Chantharamalee.

IAS2223: Human Computer Interaction

Chapter 5 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

Chapter 3 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

G063 - Human Computer Interface Design Designing the User Interface.

Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.

MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.

Ch10 Screen Layout Yonglei Tao School of Computing & Info Systems GVSU.

Title of event 14th March 2015 First name Surname, other names Institute of Machine and Industrial Design Faculty of Mechanical Engineering Brno University.

LECTURE 18 16/11/15. MAKING THE INTERFACE CONSISTENT Consistency is one way to develop and reinforce the users conceptual model of applications and give.

VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.

Printed Reports Analysis questions –Who will use the report? –What is the purpose of the report? –When or how often is the report needed? –Where does the.

Chapter 5 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

 Designers can become so entranced with their creations that they may fail to evaluate them adequately.  Experienced designers have attained the wisdom.

Chapter 5 interaction design basics. design: –what it is, interventions, goals, constraints the design process –what happens when users –who they are,

What is accessible information? On the next slide we will show you a few examples. It is information that everyone can understand.

Human Computer Interaction Lecture 11 Interaction Paradigms

Human Computer Interaction Lecture 11 Interaction Paradigms

interaction design basics

interaction design basics

Human Computer Interaction (HCI)

CHAPTER 9 SCREEN DESIGN OBJECTIVES

Yonglei Tao School of Computing & Info Systems GVSU

Formatting Text and Paragraphs

Week: 10 Human-Computer Interaction

local structure – single screen global structure – whole site

Design Principles Proximity Font

interaction design basics

interaction design basics

Agenda: 10/05/2011 and 10/10/2011 Review Access tables, queries, and forms. Review sample forms. Define 5-8 guidelines each about effective form and report.

CHAPTER 9 SCREEN DESIGN OBJECTIVES

CSE310 Human-Computer Interaction

Database Applications – Microsoft Access

What is accessible information? It is information that everyone can understand. On the next slide we will show you a few examples.

Fixed Positioning.

interaction design basics Prof. Ahmed Sameh

interaction design basics

Design Principles 8-Dec-18.

The good, the bad, & the ugly…

interaction design basics

research study/poster

Design Principles 5-Apr-19.

interaction design basics

interaction design basics

interaction design basics

interaction design basics

interaction design basics

Presentation transcript:

Putting them together screen layout and design  basic principles  grouping, structure, order  alignment  use of white space

basic principles ask –what is the user doing? think –what information, comparisons, order design –form follows function

available tools grouping of items order of items decoration - fonts, boxes etc. alignment of items white space between items

grouping and structure logically together  physically together Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) …… … … …

order of groups and items think! - what is natural order should match screen order! –use boxes, space etc. –set up tabbing right! instructions –beware the cake recipie syndrome!

decoration use boxes to group logical items use fonts for emphasis, headings but not too many!! ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text you read from left to right (English and European)  align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable!

alignment - names Usually scanning for surnames  make it easy! Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell   

alignment - numbers think purpose! which is biggest?

alignment - numbers visually: long number = big number align decimal points or right align integers

multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

multiple columns - 2 use leaders sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

multiple columns - 3 or greying (vertical too) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

multiple columns - 4 or even (with care!) ‘bad’ alignment

white space - the counter WHAT YOU SEE

THE GAPS BETWEEN white space - the counter WHAT YOU SEE

space to separate

space to structure

space to highlight

who it was Alan Dix