Official Interface Guidelines

Slides:



Advertisements
Similar presentations
Microsoft® Word 2010 Training
Advertisements

Basic Computer Skills Windows & the Internet.
Introduction to Computers Section 6A. home The Operating System (OS) The operating system (OS) is software that controls the interaction between hardware.
 Use the Left and Right arrow keys or the Page Up and Page Down keys to move between the pages. You can also click on the pages to move forward.  To.
1 Official Interface Guidelines by David Catmull User interface documentation published by Apple and Microsoft.
Apple OSX Sami Pohjolainen, Gulshan Kumar.  This is a presentation about Apple OSX guidelines  Sami Pohjolainen,
Microsoft Word 2010 Lesson 1: Introduction to Word.
Spotlight on Word Processing
Paint Shop Tutorial. Essential Overview New Corel Paint Shop Pro Photo X2 is the ideal choice for any aspiring photographer's digital darkroom. It's filled.
XP New Perspectives on Microsoft Office Word 2003 Tutorial 1 1 Microsoft Office Word 2003 Tutorial 1 – Creating a Document.
XP 1 Microsoft Office Word 2003 Tutorial 1 – Creating a Document.
Microsoft PowerPoint Level One Presented by Merrilee Shopland Media Graphics Specialist Professional Development & Evaluation Programs.
Business Computer Information Systems 1A Test 2: Word Basics, Basic Editing, and Formatting Text Lessons 1, 2, and 5 Microsoft Office XP Test 2 – REVIEW.
Exploring the Basics of Windows XP
Create Professional-looking Content Easy to Use Interface Share Documents.
1 Lesson 6 Exploring Microsoft Office 2007 Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
Key Applications Module Lesson 19 — PowerPoint Essentials
Learning Microsoft Power Point Getting Started  There are three features that you should remember as you work within PowerPoint 2007: the Microsoft.
Getting Started with Application Software
Introduction to Computers Seminar I. Parts of the Computer Personal Computer a PC (any non-Mac computer) has four major pieces of hardware-- keyboard,
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
MICROSOFT WORD GETTING STARTED WITH WORD. CONTENTS 1.STARTING THE PROGRAMSTARTING THE PROGRAM 2.BASIC TEXT EDITINGBASIC TEXT EDITING 3.SAVING A DOCUMENTSAVING.
1. Chapter 9 Maintaining Documents 3 Managing Files As with physical documents, folders, and filing cabinets, electronic files and folders must be well.
Word Processing Understanding Microsoft Word 10. Benefits of a Word Processor Word Processing Is the use of a computer and software to produce written.
CHAPTER 9 Introducing Microsoft Office Learning Objectives Start Office programs and explore common elements Use the Ribbon Work with files Use.
MSOffice WORD.
XP New Perspectives on Integrating Microsoft Office XP Tutorial 2 1 Integrating Microsoft Office XP Tutorial 2 – Integrating Word, Excel, and Access.
XP 1 Microsoft Word 2002 Tutorial 1 – Creating a Document.
MSOffice WORD 1 Microsoft® Office 2010: Illustrated Introductory Part 1 ®
Basic Computer and Word Functions, part 1 Read the information and use to answer the questions in the Basic Computer and Word Functions Study Guide.
Copyright © 2010 Wolters Kluwer Health | Lippincott Williams & Wilkins Introduction to Windows Chapter 2.
Microsoft Word Objective: Understand Basic Word/Word Processing Skills Lesson: Create and Save a New Document LOL: Understand/Apply Create your first Word.
Microsoft Office 2008 for Mac – Illustrated Unit C: Understanding File Management.
Basic Computer and Word Functions, part 1 Read the information and use to answer the questions in the Basic Computer and Word Functions Study Guide.
Microsoft ® Word 2010 Training Create your first Word document I.
Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.
Lesson 1 - Understanding the Word Window and Creating a New Document
FIRST COURSE PowerPoint Tutorial 4 Integrating PowerPoint with Other Programs and Collaborating with Workgroups.
Introduction to Word Processing.  Learn uses of word-processing software  Differentiate between typewriter and word- processing software  Explore various.
Today We Will Review: Operating Systems (Windows) (week 3 & 4) Starting up MS Windows Desktop and its contents Functions of the desktop components Brain.
XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.
Lesson 4 Word Processing and Microsoft Word Computer Literacy 1 Transition Plus Services.
Basic Computer Skills Windows & the Internet vfu.bg/en/e-Learning/
Sending effective and professional s . Session aims and objectives Lesson Aims and Objectives send s that are fit for purpose and audience.
Lesson Use the Windows Start button 2 Use a desktop shortcut 3 Used Most Frequently Used Programs on left side of Start Menu 4 Right-click a Word.
Chapter 11 Enhancing an Online Form and Using Macros Microsoft Word 2013.
Fundamentals of Windows Mouse n 4 Basic Operations: –Pointing –Clicking –Double Clicking –Dragging.
Lesson 11 Exploring Microsoft Office 2007
Introduction to iOS App Development Environment
Microsoft Word 2016 Lesson 1.
Microsoft Word 125 S. Clark St., 4th floor, Chicago, Illinois  Telephone  Fax
Windows 7 and file management
Using Office Backstage
Introduction to Microsoft Publisher 2016
The Desktop Screen image displayed when a PC starts up A metaphor
Fastest way for already created documents
Tutorial 1 – Creating a Document
Microsoft Access 2003 Illustrated Complete
Using PowerPoint.
Microsoft Excel 2007 – Level 1
Exploring the Basics of Windows XP
Microsoft Word 2010 Lesson 1.
4.2 Microsoft Word.
New Perspectives on Windows XP
Microsoft Office Access 2003
Chapter 4 Enhancing the Graphical User Interface
Chapter 4 Enhancing the Graphical User Interface
Welcome To Microsoft Word 2016
An Introduction to the Windows Operating System
TERMS AND CONDITIONS   These PowerPoint slides are a tool for lecturers, and as such: YOU MAY add content to the slides, delete content from the slides,
Presentation transcript:

Official Interface Guidelines User interface documentation published by Apple and Microsoft

Basic Principles (everybody agrees on these) See-and-point Metaphors Files and folders Direct manipulation User control Actions initiated by the user, not the computer Modelessness Interactive and responsive

Basic Principles Feedback and communication Consistency WYSIWYG Internal and external Consistent with the guidelines WYSIWYG Forgiveness Perceived stability Aesthetic integrity Good visual design Simplicity Simple, not simplistic

Basic Principles Good first experience Clear and simple installer Convenient default settings Follow the platform’s own guidelines Ignoring them reduces their usefulness for all other applications

Platform-Specific Details Appearance, layout and usage of interface elements Keyboard shortcuts and other actions Navigation Modifier keys (shift, control, etc.) Mouse cursors and meanings of buttons File organization on disk

Dealing With Differences Pet peeve: porting an application without adapting to the new platform’s standards What do these keys do when editing text: Home End Page up/down Microsoft and Macromedia ported their Windows apps to the Mac OS without adopting Mac text navigation standards PC: Home moves insertion point to beginning of line, End moves to end Mac: Home scrolls to top of document, End scrolls to end Page up/down don’t move the insertion point on the Mac

Beyond the Guidelines There are cases when you have to create new interface elements Make sure they appear integrated Give them an appearance consistent with everything else Make the different behavior obvious Don’t just use a standard element and make it do something else If it looks like a regular push button, it should act like one If you’ve modified it to produce a popup menu or something, add an indicator

Microsoft’s Guidelines How many mistakes can you find in this picture? Text is cut off DOS path name - is it that hard to use a standard save dialog? No browse button - you have to figure out the DOS path name for the folder you want Close button should be Cancel Buttons should be more separated, since they perform a wide variety of functions This is what you get when you download Microsoft’s guidelines for Windows XP

Push Buttons You click it, and something happens Choose the title text carefully Apple: “Button names should be verbs that describe the action performed” Microsoft: “Aim for the shortest possible label; one word is best.” “If possible, use label text that makes sense when read out of context — for example, when a user reads or hears only the label of the current control.” An example of guidelines for a particular element On both platforms, “Yes” and “No” are not good choices for button titles Microsoft doesn’t always follow this - Excel’s dialog to confirm deleting a sheet includes an explanation of what each button will do, instead of using specific text for the button titles (Mac version at least)

Layout

Layout Apple has a program called Interface Builder which automatically helps you use the correct spacing Notice the differences between this window and the Windows version? Buttons are moved to the bottom Special Help button, not just a push button that says “help”

Layout

Icons Icons get used for lots of different things Representing objects Files Tools Representing commands Open Undo ..often shortcuts to menu commands that have no icon

Icons There are guidelines for these too Apple: Microsoft: Design and composition should indicate purpose Perspective should agree with real-life interactions Differentiate them from other UI elements Microsoft: Colors that complement the XP design Perspective is either at a certain angle, or straight-on Everyday objects should look modern Microsoft seems more interested in having 3rd part icons that fit the XP style Apple is more concerned with composition than having everyone imitate their “photo-illustrative” style

Microsoft Icon Composition Exceptions: Document icons Symbols such as warning Single objects Objects not recognizable at an angle Icons are either in that particular perspective, or straight-on

Apple Icon Composition Icon “genres” Application: media (paper) and tool (pen) Utility: straight perspective, subdued colors ..also document, plug-in, toolbar The perspective (and shadow) of an icon should agree with how you interact with its real-life counterpart: on a desk, on a shelf, in your hand

Pet Peeve: Shadows Shadows help add dimension to the image The shadow can do as much as the object itself in defining its shape Careless use can flatten the object The ball is exactly the same in all three cases; the shadow defines its shape (flat or spherical) and its relationship to its environment (on a wall or floor)

Summary Concrete examples of the principles we’ve been discussing There are professionals who actually believe in what we’ve been discussing You don’t have to design every single element of your application ..in fact you shouldn’t ..most of the time

Sources Apple’s User Experience page http://developer.apple.com/ue Microsoft’s User Interface Design and Development page http://msdn.microsoft.com/library/default.asp?url=/nhp/default.asp?contentid=28000443 Kirstie brought up a good point: how easy are the guidelines to navigate/use? Apple does a better job of collecting it all in one document; Microsoft’s are a bit scattered