Our new hires range from newly graduated students to senior business professionals from all backgrounds and cultures.
This week I designed a step by step guide to take new hires through how to submit their time sheets. This is one of the first tasks they will need to learn as they will be expected to complete this during their first week. In designing our images we needed to take into consideration Contrast, Alignment, Repetition, and Proximity.
Contrast
To provide some contrast between the typefaces in the title and steps I used Arial Black which is a 'fat' font (Lohr, 2008, p. 201). I used the regular Arial font for each of the step details to provide contrast between the title text and details text. I also chose to use white text for the main title to contrast against the background teal color. Then for the sub heading, which shows the path to the time sheets from the company intranet, I used the magenta/plum color to link in with the steps the learner will need to take.
Alignment
Each of the step details are aligned to the left for easier reading (Lohr, 2008, p. 201) and the step details and screenshot are aligned horizontally so it's clear that each step detail belongs to the corresponding screenshot. As the learner goes through each of the slides each step and screenshot are in exactly the same place on the page.
Repetition
Each of the steps learners need to take are in the same format. The screenshots are the same size, the areas in the screenshot are highlighted in the same way, and each of the slides have exactly the same title at the top of the page in the same colors. This creates a sense of unity between each of the pages and helps the learner become familiar with going through the steps (Lohr, 2008, p. 203).
Proximity
In the images I've tried to keep the step details and the corresponding screenshots close enough together, yet not so close that they feel crowded.
Using CARP elements I hope this design will provide consistency for the learner and help them to easily learn and navigate to complete their time sheet.
I went through quite a few changes during the design of these images. I couldn't quite get the Collins Hutch logo and main title looking how I wanted as I wanted the logo to stand out a bit more. It's still now exactly how I like, but I think this works for now. Also I had originally had black borders around the screenshots, but the feedback I received was that it was too harsh and actually took away from the highlight boxes. As such I changed the borders to a dark gray. I also had the highlight boxes in my Collins Hutch orange, but the feedback I got was that didn't stand out enough. There wasn't enough contrast. So I changed these to red as I knew they would stand out more and draw people's eye to them.
Reference
Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.
No comments:
Post a Comment