VCE IT Theory Slideshows by Mark Kelly2016-2019 study design
By Mark Kelly, vceit.com, [email protected]
Design Principles
Begin
The Glossary (sort of) says
Design principles are accepted characteristics that contribute to the
– functionality and – appearance
of solutions.
2VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
The Glossary (sort of) says
• Principles related to functionality are 1. Useability including
a) robustness, b) flexibilityc) ease of use
2. Accessibility including a) navigationb) error tolerance
3VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
The Glossary (sort of) says
• Principles related to appearance are1. alignment, 2. repetition, 3. contrast, 4. space5. balance.
4VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Functionality Design Principles
5VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
1. Useability including a) robustness, b) flexibilityc) ease of use
Functionality Design Principles> Usability
> Robustness
6VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
• The ability of a computer system to cope with errors during execution.
• The ability of a solution to continue operating despite abnormalities in data inputs, calculations
• Making a product insensitive to variations it may encounter.
7VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Resists failing in the face of:- Invalid data (by using
comprehensive data validation)
Functionality Design Principles> Usability
> Robustness
8VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Resists failing in the face of becoming overloaded • by queuing incoming work• by being scalable• by using high-capacity
components• by using redundant equipment
(e.g. standby cooling fans)
Functionality Design Principles> Usability
> Robustness
9VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Resists failing in the face of runtime errors • by testing the amount of free
memory before allocating it;• by checking free disk space
before saving; • by checking printer/network
availability before relying on them
Functionality Design Principles> Usability
> Robustness
10VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Resists failing in the face of user error (see error tolerance later)- by anticipating common errors
and gracefully handling them- by checking for input error (e.g. a
browser may quietly ignore malformed HTML)
Functionality Design Principles> Usability
> Robustness
Functionality Design Principles> Usability
> Robustness
11VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Use reliable components, such as trustworthy, secure, up-to-date • device drivers• plugins, • algorithmse.g. using a media player that can cope with nearly any media, even rare formats or media with errors.
Functionality Design Principles> Usability
> Robustness
12
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Anticipates future requirements• A value that is now always integer may at
some stage need decimal places (e.g. GST rate)
• A small value may one day outgrow a confining data type (e.g. using the small byte data type won’t cope if the value rises above 255.)
Functionality Design Principles> Usability
> Robustness
13
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Anticipates future requirements• Enforcing a 4-digit postcode will fail if
you later get US customers.• Using 2-digit years before 2000.
Functionality Design Principles> Usability
> Robustness
14
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Anticipates and allows uncommon conditions, e.g.• Don’t forbid spaces in family names
(fails for von Zeppelin, de Kretser)• A street name without a street type
(e.g. “11 Broadway”)
Functionality Design Principles> Usability
> Robustness
15VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Can be helped with thorough and imaginative testing.• But can be costly in terms of time
and effort during design, development & testing.
Functionality Design Principles> Usability> Flexibility
16VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Flexibility – the ability of a solution to adapt to new or changed conditions or requirements.
Functionality Design Principles> Usability> Flexibility
17VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Flexibility – a solution that can be used for more than one purpose.
Functionality Design Principles> Usability> Flexibility
18VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
• e.g. a tablet that converts into a laptop computer
• a user manual that also contains tutorials.
• a router box that includes a WAP, print server, ADSL modem, switch.
Functionality Design Principles> Usability> Flexibility
19VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
e.g. a WAP that copes with A,B,G,N, AC wireless protocols.e.g. email software that handles IMAP and POP.e.g. word processor that can import a variety of text from other formats, products or previous versions.
Functionality Design Principles> Usability> Flexibility
20VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
e.g. USB 3.0 ports that are backwardly-compatible with USB 1.0, 2.0 products.e.g. an OS like MS Windows 10 that can still run programs from decades earlier.
Functionality Design Principles> Usability> Flexibility
21VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Achieving flexible solutions…• Don’t build in constants (e.g. 10% GST)
that cannot later be changed. Use an .ini file or registry to store settings.
• Let users customise their settings, shortcuts, preferences, menus, themes, layouts
• Avoid making restrictive assumptions (e.g. all users will have mice & large monitors)
Functionality Design Principles> Usability> Flexibility
22VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Flexible solutions…• Can deal with a variety of related
requirements, e.g. • software that can burn CD,
DVD, Blu-Ray in +R, -R, +RW, -RW formats and also disk images (ISO)
Functionality Design Principles> Usability> Flexibility
23VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Flexible solutions…• Cater for a variety of users – e.g.
command entry using menus, keyboard shortcuts, buttons, toolbars.
• Can be configured for regional differences, e.g. language, spell-check dictionaries, date formats, currencies.
Functionality Design Principles> Usability> Flexibility
24VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
E.g. multimodal solution that lets users choose to have either
• full control over the sequence and speed of information, or
• an automatic presentation.
Functionality Design Principles> Usability> Flexibility
25VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Browser software that can• Display webpages• Open PDF files• Play music and video• Play games and run apps• Read eBooks• Narrate text aloud• Access email• Act as personal assistants• Scan for viruses
Functionality Design Principles> Usability> Flexibility
26VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Warning – flexibility comes at a cost. Common downsides of flexibility:- It does many jobs, but all of them are done
at a basic level of - It will take more time and effort to develop- It will be expensive to buy, or it will be BIG.- Its irrelevant functionality (‘bloat’) may
annoy users or make essential functions harder to perform.
Functionality Design Principles> Usability> Flexibility
27VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Software bloat…
http://www.27months.com/2009/03/the-virtues-of-small-software/
Functionality Design Principles> Usability
> Ease of use
28
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Ease of use is important for • Beginners, children• Occasional users• People with special needs
(see ‘Accessibility’)
Functionality Design Principles> Usability
> Ease of use
29VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Use task automation• Wizards• Macros• ‘Express settings’• Beginner / Expert
modes
Functionality Design Principles> Usability
> Ease of use
30VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Affordance – where an interface leads users to naturally take correct steps.
Creates an “intuitive” interface requiring little training.
Functionality Design Principles> Usability
> Ease of use
31VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Affordance e.g. a 3D button that looks like it should be clicked with the mouse.
Functionality Design Principles> Usability
> Ease of use
32VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Affordance• e.g. Red text that
automatically suggests danger or urgency.
• Icons that need few language skills to interpret
Functionality Design Principles> Usability
> Ease of use
33VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Affordance - A display that shakes when incorrect data is entered, as if shaking its head.
Functionality Design Principles> Usability
> Ease of use
34VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Is helped by…• Context-sensitive help• Online documentation• Tool tips• Onscreen instructions
Functionality Design Principles> Usability
> Ease of use
35VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Is helped by…• Onscreen
instructions
Functionality Design Principles
36
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
2. Accessibility including a) navigationb) error tolerance
Above: poor navigation and poor error tolerance
Functionality Design Principles
37VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Accessibility
In VCE IT relates to catering for people with disabilities or special needs.
Functionality Design Principles
38VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Disabilities or special needs.e.g. • Poor vision• Poor coordination, tremors• Weak language skills• Missing or non-functional limbs• Intellectual disability• Extreme youth or age• Lack of tech knowledge
Functionality Design Principles
39VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Colour Blindness
Functionality Design Principles
40VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Accessibility
It does not refer to information being easy to find, or quick to download.
Functionality Design Principles> Accessibility> Navigation
41
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Give users a choice of how to navigate e.g.• Shortcut keys• Menu bars/ribbons• Drop-down menus• Buttons• Voice input• Screen taps
Functionality Design Principles> Accessibility> Navigation
42
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
• Make navigation controls easy to find, e.g. top or side of screen
• Make nav work regardless of screen size or input method
• Make navigation controls big enough to easily read and click
• Minimise clicks/typing required (e.g. open a menu on mouse-over rather than a click)
Functionality Design Principles> Accessibility> Navigation
43VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Functionality Design Principles> Accessibility
> Error Tolerance
44
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Error tolerance• Anticipating and coping with
user errors
Functionality Design Principles> Accessibility
> Error Tolerance
45VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Common errors• Clicking the wrong button• Entering invalid data• Not entering mandatory data• Selecting unavailable options
Functionality Design Principles> Accessibility
> Error Tolerance
46VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Error Tolerant handling
Clicking the wrong button
Always offer a ‘Back’ or ‘Cancel’ link. Confirm serious actions (‘Are you sure you want to…’)
Entering invalid data Range or type validation. Give on-screen tips about data formats and types.Use appropriate GUI data entry controls
Not entering mandatory data
Existence validation. Clearly mark fields that are required.
Selecting unavailable options
Don’t offer options that make no sense. Grey out unavailable options.Disable buttons that are currently unacceptable.
Functionality Design Principles> Accessibility
> Error Tolerance
47VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Error Tolerant handling
Accidental data loss
Provide multiple-undo; delete to a recoverable bin; background saving of documents.
Typing errors Spell checking; auto-correction (e.g. “Did you mean…?”, or quietly adding a missing Http:// to a URL)
Lack of skill Anticipatory advice (e.g. “This will take some time. Do you want to continue?”)Diagnostic information (“You can’t edit this layer because it is locked. Unlock it in the ‘Edit’ menu.”)Tool tips, context-sensitive help.
Accidental mouse click
Trigger event on mouse-up event, not mouse-down. User can slide mouse pointer off the button and not trigger the event.
Appearance Design Principles> Alignment
Alignment – the lining-up of objects to group or organise them– horizontal– vertical– diagonal– left / right edge, centred
48
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Alignment
Diagonal alignmentCreates a feeling of imbalance, movement, action.
49
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Alignment
Centred vertically
50VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Centred horizontally
50
Appearance Design Principles> Alignment
Vertical menu
51VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Horizontal menu
51
Appearance Design Principles> Alignment
52VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Text – left-justified (ragged right edge)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
52
Text – centred (only for headings!)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
Text – right-justified (rarely used)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Text – fully-justified (straight edges)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Appearance Design Principles> Alignment
53VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com53
Text – right-justified (rarely used, but can be effective when wisely-chosen)
Appearance Design Principles> Alignment
54VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com54
Powerpoint automatically shows alignment (with dotted red lines) as objects are moved around.
Appearance Design Principles> Repetition
The repeated use of visual elements creates a sense of unity, predictability and consistency. Lets users extract information quickly.
55
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Repetition
e.g. – All main headings are 24 point, bold, sans
serif. – All links are underlined. – An icon always means the same thing on all
pages.– The same colour scheme is used throughout– Menus always appear in the same place on
every page56
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Repetition
And a sudden change to a repeated element will draw attention to it more dramatically.e.g. suddenly making some text bold or coloured so it stands out from the usual text.
57
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Contrast
ContrastThe difference between foreground and background colours. Greatly affects readability.
58
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Space – refers to the distance around or between visual elements. There is positive and negative space.
59VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
• Positive space represents the object.
• Negative space surrounds the object.
• If you see a vase, the white is positive space.
• If you see faces, the black is the positive space.
60VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
• Creative use of positive and negative space can lead to dramatic and eye-catching results
61VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Space may also include (non-examinable) the concept of proximity• Items that are close to each other are more likely to
be related or connected.• Items that are visually separated are visually
differentiated (like paragraphs of text with space between them)
62VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Clever use of space can• establish contrast, emphasis and hierarchy;• generate drama and tension;• provide visual rest between groups of elements;
• make an item stand out as being separate or different
63VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Space also is important in helping legibility and readability. Which of these would you rather read?
64VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Poor spacing Good spaceLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat enim id nulla molestie, et vulputate dui venenatis. Curabitur egestas elit ullamcorper nisl laoreet posuere. Integer condimentum dolor arcu, in tincidunt mi molestie a. In hac habitasse platea dictumst. Vivamus luctus, elit vitae molestie laoreet, risus turpis auctor eros, a posuere elit urna eget tellus. Vivamus a efficitur mi, ac viverra lorem. Ut viverra purus eget leo tempor imperdiet. Suspendisse ac orci lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ac pharetra felis. Nulla eu ullamcorper ligula, ac laoreet dui. Etiam bibendum, lectus nec consectetur condimentum, orci nibh convallis lectus, non bibendum velit mi at purus. Aliquam vulputate placerat interdum. Maecenas condimentum felis a lacus ultricies, vitae eleifend nisl luctus. Fusce semper mauris aliquam nibh elementum tristique. Nam nec laoreet purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat enim id nulla molestie, et vulputate dui venenatis. Curabitur egestas elit ullamcorper nisl laoreet posuere. Integer condimentum dolor arcu, in tincidunt mi molestie a.
In hac habitasse platea dictumst. Vivamus luctus, elit vitae molestie laoreet, risus turpis auctor eros, a posuere elit urna eget tellus. Vivamus a efficitur mi, ac viverra lorem. Ut viverra purus eget leo tempor imperdiet. Suspendisse ac orci lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ac pharetra felis. Nulla eu ullamcorper ligula, ac laoreet dui.
Etiam bibendum, lectus nec consectetur condimentum, orci nibh convallis lectus, non bibendum velit mi at purus. Aliquam vulputate placerat interdum. Maecenas condimentum felis a lacus ultricies, vitae eleifend nisl luctus. Fusce semper mauris aliquam nibh elementum tristique. Nam nec laoreet purus.
Appearance Design Principles> Space
The use of space also conveys qualities of • Maturity• Elegance• Sophistication, • Quality • Simplicity • Luxury• Confidence• Honesty
65VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Before Google, search engine front pages looked like this……
66VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Then Google came…
67VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
The moral… don’t crowd pages and cram in as much text as possible.
68VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Use multiple pages or screens.
69VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Space
Provide• Generous left/right/top/bottom page margins• Space between paragraphs• Space between text and images• Space between headings and body text• Readable line spacing between lines of body text• Otherwise you’ll end up with something like this…
70VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles > SpaceProvideGenerous left/right/top/bottom page marginsSpace between paragraphsSpace between text and imagesSpace between headings and body textReadable line spacing between lines of body text
71VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles > Space
Use the space provided.A phone display, for example is usually tall and narrow when the phone is held normally.Align labels and text fields vertically to make best use of the space.
72VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Balance
Balance.Objects are distributed evenly to create a satisfying balance.
73
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
The penguin dominates the left of the image, so the text is right-justified to balance it on the right.
Appearance Design Principles> Balance
Balance.Objects are distributed evenly to create a satisfying balance.
74
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
The text and image do not interfere with each other, and efficiently use all of the slide’s area.
Appearance Design Principles> BalanceBad Balance.Objects are distributed unevenly to create a unsatisfying balance.
75VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Appearance Design Principles> Balance
Top slide lacks design. Alignment is random. Balance is wonky.Space is poorly distributed.
76
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Bottom slide has symmetry. Related items are visually together (i.e. good proximity). Contrast focuses attention on main info.
Mark [email protected]
vceit.comThese slideshows may be freely used, modified or distributed by teachers and students anywhere
butthey may NOT be sold.
they must NOT be redistributed if you modify them.
This is not a VCAA publication and does not speak for VCAA.Portions (e.g. exam questions, study design extracts, glossary terms) may be copyright Victorian Curriculum and
Assessment Authority and are used with permission for educational purposes. Thanks, guys!
VCE IT THEORY SLIDESHOWS2016-2019 study design
77VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com
Since you’ve been so good, here’s a picture you can look at
VCE IT slideshows © 2015-2019 Mark Kelly, vceit.com78