chapter 5: visual organizationcopyright © 2004 by prentice hall user-centered website development:...
Post on 22-Dec-2015
222 views
TRANSCRIPT
![Page 1: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/1.jpg)
Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall
User-Centered Website Development: A Human-Computer Interaction Approach
![Page 2: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/2.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Daniel D. McCrackenCity College of New York
Rosalee J. WolfeDePaul University
With a foreword by:Jared M. Spool, Founding Principal, User Interface EngineeringPowerPoint slides by Dan McCracken, with
thanks to Rosalee Wolfe and S. Jane Fritz, St. Joseph’s College
![Page 3: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/3.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Credits
Slide 11: Courtesy of the Orpheus Chamber Orchestra.Slide 13: Courtesy of Eddie Bauer.
![Page 4: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/4.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
5. Visual Organization
In this chapter you will learn about:Four principles of visual organization and how to apply them
ProximityAlignmentConsistencyContrast
![Page 5: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/5.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Four organizing principles: proximity
See next slide for a tongue-in-cheek example: mindless application of alphabetic organizationPreview: the result is a hodge-podge as seen by the user
![Page 6: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/6.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Dan’s Clothing: the mindless version
![Page 7: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/7.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
What groups would make sense?
Women’s clothes, Men’s clothes, Kid’s clothes, Special sizesJuly Specials, Sales on rainwear, Closeout on pink socksStore locations, Store hoursOpen an account, Your account statusCheck outEmail us.
![Page 8: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/8.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Dan’s Clothing: with sensible groups
![Page 9: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/9.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Avoid centered alignment for lines that are of nearly equal length
![Page 10: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/10.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Lines are now greatly different in length: reader knows it’s intentional
![Page 11: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/11.jpg)
Orpheus Chamber Orchestra: nice use of proximity and alignment
![Page 12: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/12.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
The principles are seen in combination
Eddie Bauer site (next slide) hasHorizontal alignmentVertical alignmentProximity, to group like itemsConsistency, in type size and font for links
Contrast, between SALE and most else
![Page 13: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/13.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
![Page 14: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/14.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Don’t be a slave to centered alignment . . .
![Page 15: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/15.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
. . . which is OK, but isn’t this better?
![Page 16: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/16.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Note the consistent layout in the next few slides
![Page 17: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/17.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
One of the pages reachable from the previous slide
![Page 18: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/18.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
One of the pages reachable from the previous slide
![Page 19: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/19.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
How can we make this more interesting?
![Page 20: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/20.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Use more contrast
![Page 21: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/21.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Talk about boring!
![Page 22: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/22.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
This is a quiz! (Not really)
Look again at the previous slide. How many ways can you improve it?Can you put all four principles to work?Next slide shows one possible wayYou can find lots of others
![Page 23: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/23.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Here’s one way, but there are many other possibilities
![Page 24: Chapter 5: Visual OrganizationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach](https://reader035.vdocuments.mx/reader035/viewer/2022062304/56649d805503460f94a63fca/html5/thumbnails/24.jpg)
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall
Summary
In this chapter you learned:Four principles of visual organization
ProximityAlignmentConsistencyContrast
Some ways they can be appliedThe message:
There are principles; your can learn them and use them