402

Graphic Design for e-Learning Interfaces that Support Learning Adrian Taylor, Enspire Learning

June 15-16, 2006

Produced by Advanced Topics in e-Learning Instructional Design Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Interfaces that Support Learning

About

ƒ What we do •Enspire develops custom learning courseware, simulations, and blended learning programs for a broad range of clients •Since our founding in 2001 we have successfully delivered over 200 projects ƒ Our team •50 professionals including instructional designers, script writers, multimedia designers, technologists, and audio and video professionals ƒ About me •Developed a wide range of multimedia such as websites, CD-ROMs, e- learning applications, and kiosks for start-ups, software developers, publishers, advertisers, and media groups

2

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 1 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

In this session

ƒDiscuss the importance of good interface design ƒReview the key principles of good interface design ƒOutline our process and techniques for designing user-centric interfaces ƒReview some demos

3

Why is good interface design so important? ƒThe user interface is the gateway through which all content is accessed

4

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 2 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Successful interface design

ƒIs intuitive, making it easy to learn the system and use it ƒMakes it easy for users to perform tasks: •Accurately •Completely ƒPuts the user at ease ƒRespects the user’s time by making tasks efficient

5

Unsuccessful interface design

ƒ Frustrates users and creates unwarranted anxiety ƒ Reduces learner motivation, sometimes to the point of exiting the program ƒ Obscures paths to task completion ƒ Distracts from learning

6

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 3 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Cognitive load theory and interface design

ƒ Three types of memory •Sensory - is used to perceive information (visible/audible) •Working - performs the intellectual activities associated with thinking and processing information •Long-term - stores knowledge and skills ƒ Knowledge and skills can be transferred to long-term memory only after they have been processed by working memory ƒ Working memory has a limited capacity, so additional processing required by an interface can reduce knowledge transfer and retention

Dr. Graham Cooper - December 1998 7

What is a User Interface?

ƒ A User Interface (UI) consists of the hardware and software elements that allow a user give input or receive feedback ƒ Input: •Touch = Mouse, keyboard, capacitive/reactive touch screen, tablet, joystick, trackball, etc. •Speak = Microphone ƒ Output •See = Screen •Hear = Speakers

8

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 4 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

What is a Graphical User Interface?

ƒ A Graphical User Interface (GUI) is an on-screen visualization of controls and data that allows the user to give input and receive feedback ƒ Operating System (OS) ƒ Software •Word processor •Calculator •Tetris •Web browser •Online application

9

Questions?

10

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 5 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Top 10 Principles of Good Interface Design ƒThe following are not: •All encompassing •Hard-and-fast rules ƒThey are: •Guides •Considerations •General best practices

11

1) Consistency

ƒ Consistency is of paramount concern when it comes to usability ƒ Create a set of rules and stick to them •Explain the rules •If your system requires adjustment, make the change consistently •Both visible elements and invisible mapping ƒ Create trust •Once users learn the interface they will begin to establish expectations, meet them consistently, and feel at ease •Avoid surprises ƒ Don’t force it; if things function differently, don’t try to cram them into the same mold

12

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 6 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

2) Simplicity is a virtue

ƒ Only include controls, visualized information, and features that will truly support your learner ƒ More choices often result in more confusion •But don’t set arbitrary limits!

13

3) Visibility

ƒKeep interface elements visually present whenever possible, especially those related to navigation ƒDon’t ask users to create or remember a mental map ƒMake sure that both information and controls related to a certain task are made available concurrently

14

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 7 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

4) Location, location, location

ƒ Prioritize •Not all elements have equal importance to the user •Make sure that prime real estate and scale are reserved for the right elements ƒ Group related elements; separate unrelated ones •Find items faster •Reduce mouse movement ƒ Keep the learner’s focus on the content

15

5) Understandability

ƒInformation and controls should be obvious to the user ƒReference the user’s knowledge base to impart understanding •Real-world representations •Common web and software conventions

16

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 8 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

6) Create efficiency

ƒ Identify areas of repetition (frequent tasks) and work to minimize the effort required to perform those tasks ƒ Consider what is optimal for the user, not the interface ƒ Use simple language and common user terminology ƒ Take off the training wheels ƒ Avoid downtime

17

7) Feedback

ƒGive users confirmation of every interaction they have with the interface ƒKeep user informed about all relevant state-changes ƒIf there is a delay caused by loading or processing, make sure the user is made aware

18

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 9 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

8) Safety

ƒ Protect users from taking potentially damaging action •If an action has a large impact, ask the user for confirmation ƒ Complex features may require roll-over explanations ƒ Reduce user frustration by: •Providing up-front and/or on-demand training and help options •Providing information within the interface that may answer common questions, reducing the need for help ƒ Don’t trap users; always provide a way out

19

9) Flexibility ƒCreate systems that allow for different: •User types •Learner types ƒLet users control their experience •Pacing, volume, order, etc. •Bookmaking / resume

20

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 10 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

10) Aesthetics

ƒApproachability and the law of the aesthetic interface ƒBe intentional •Things that are misaligned or look like mistakes confuse and distract users •Look and feel will set expectations about function •Color, shape, and size have meaning

21

Questions?

22

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 11 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Process & Technique

ƒWalk through the process we use at Enspire ƒFollow some tangents on technique and best practices

23

Begin with the end-user

ƒGood user interface design is about users ƒOne size does not fit all ƒAt the start of all projects, the team must make themselves knowledgeable about the end-user, the learner ƒInterview actual end-users whenever possible

24

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 12 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Know thy user

ƒWho is the user? •Demographics, job duties, employer’s corporate culture ƒWhat are their goals? •Accelerate at their job, stop having to ask their kid how to use the computer ƒWhat are their needs? •Large text for poor eyesight, additional help explanation, resume functionality for frequent interruptions

25

Create Personas

ƒ Based on your research, develop 2 or 3 mock users (can be more dependent on segmentation in the user-group, project size, etc.) ƒ Personas give the end-user a seat at the table ƒ Help to answer questions during development when: •Your team has limited access to the end-users •Your development timeline is too rapid to practically get user input •Decisions are limited in scope and it is not prudent to seek input

26

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 13 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Technical profile

ƒ How will the course be delivered (CD-ROM, online, mobile device)? ƒ What are the target browsers and operating systems? ƒ Is there any other information known about the machines on which the user will be accessing the course (newer/older, work, home, LCD, CRT)? ƒ What are the bandwidth constraints? ƒ Will the course be fixed size or scalable? ƒ From what environment will the user access the course (intranet, company web-site, LMS)?

27

Content & Course Structure

ƒ Entire team should become familiar with content ƒ Instructional designers should work closely with information and interface designers to develop the course structure ƒ Architect your entire training application •Course structure, reference materials, help, links, tools, etc. ƒ Interface design does not start by drawing pictures ƒ Course structure should always inform interface design •The UI grows from the application’s schema •Reduce the user’s mental load by developing a logical structure and clearly articulating it

28

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 14 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Sitemaps & Flowcharts

ƒ Flow charts visualize the progression of a course •Commonly used to architect branching or non-linear e-learning content ƒ Site-maps are diagrams that illustrate how all parts (sections, pages, areas) of an application are connected •Commonly used to order content by grouping it into logical sections, as well as to explore how users will navigate ƒ Check your proposed structure: •Do you have the right amount of order? •Is the structure overly robust •Does the structure lack division •Will the structure support your user’s goals and needs? •Use cases (one-time use vs. repeat or reference use) •How is the information ordered (is the user used to seeing it another way) 29

30

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 15 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

31

Wire-frames

ƒ Simple gray-scale layouts (boxes and circles) •Devoid of look and feel ƒ Rapidly inventory elements on a screen-by-screen basis ƒ Understand when users will need what information and which controls ƒ Consistently translate application structure to interface layout ƒ Reduce risk of UI overhauls late in the development cycle

32

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 16 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

33

Appling the principles

ƒ The power of placement •Prioritization •Ordering •Focus area ƒ Grouping ƒ Consistency •Common controls •Way-finding and landmarks •Progress ƒ Keep in mind limiting factors •Tech profile •User profile

34

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 17 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Questions?

35

Mock-ups

ƒ Gather references •Do a little visual research •Web, periodicals, internal corporate materials, television, etc. •Corporate branding and style guides •Context •In what environment will the user access this application (email link, LMS, training center, kiosk) ƒ Avoid ego and channel the user ƒ Iterate •Work macro to micro (don’t get caught up in the details or get too attached too early)

36

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 18 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Metaphor

ƒ Visual metaphors can help the user understand complex applications by referencing a real-world system they already have familiarity with ƒ Choose carefully: •Avoid metaphors that are too loosely related •Aim for rich metaphors which can be used throughout the application •Use caution when applying multiple metaphors ƒ Use visual representation, audio, and animation cues to reinforce metaphor ƒ Keep your audience in mind •Is this a system they would be familiar with? •Metaphors don’t always cross borders

37

Visual language

ƒEvery time we develop an interface, we invent a visual language ƒMake rules and apply them consistently •Interactive elements •Passive elements

38

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 19 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Development

ƒKeep communication channels open between designers and developers ƒBe flexible and responsive during development and testing •Build modularly •Monitor how changes affect the interface as a whole ƒPair the interface with content early and often

39

Questions?

40

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 20 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Reusability

ƒ Keep things modular •Autonomy for all elements •Keep labels, sizes, even colors dynamic and easily updatable ƒ Allow for extra everything •Titles, quantity of navigable sections, number of pages or media elements, character limits in text fields ƒ If the structure and interface are developed collaboratively between the instructional designer and interface designer, then a content template can be generated for future courses

41

Accessibility & Usability

ƒ When using color to convey information, make sure to use a secondary indicator as well ƒ Make sure you have enough contrast •Foreground/background •Text on plane ƒ Use text that is appropriately sized for your target audience ƒ Construct a logical tab order that supports refresh and common tasks ƒ Clearly tag buttons and controls

42

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 21 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

User testing

ƒ Go straight to the source: •When possible, get feedback directly from end-users •Make sure your review group represents the different segments of your target audience •Try to keep the same reviewers throughout development but supplement them with fresh eyes for the last major release ƒ Test early ƒ Avoid testing between functional releases ƒ When access to actual end-users is not possible, try to get personnel that have worked with, managed, or trained the target audience

43

Demos

ƒ Virtual Team Management •SAP University ƒ Electronic Communications: Using Invision •Texas Health Resources ƒ Ito University Foundations •United Technologies ƒ TrueComp Enterprise – Analytics •Callidus Software ƒ Mission: Train and Sustain •Texas National Guard

44

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 22 Learning, Adrian Taylor, Enspire Learning Advanced Topics in e-Learning Instructional Design June 15 & 16, 2006

Thank you for your time.

Feel free to contact me with additional questions or comments.

Adrian Taylor [email protected] http://www.enspire.com/custom/demonstrations

45

Session 402 – Graphic Design for e-Learning Interfaces that Support Page 23 Learning, Adrian Taylor, Enspire Learning