Graphic Design for e-learning Interfaces that Support Learning

Transcription

1 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

2 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 Page 1

3 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 Page 2

4 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 Page 3

5 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 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 Page 4

6 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 Page 5

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

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

9 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 Page 8

10 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 Page 9

11 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 Page 10

12 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 Page 11

13 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 Page 12

14 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 Page 13

15 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 Page 14

16 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) Page 15

17 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 Page 16

18 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 Page 17

19 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 ( 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 Page 18

20 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 Page 19

21 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 Page 20

22 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 Page 21

23 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 Page 22

24 Thank you for your time. Feel free to contact me with additional questions or comments. Adrian Taylor 45 Page 23