Charisma or camel? A sociotechnical approach to Web redesign

1. Charisma or camel?A sociotechnical approach to Web redesign Dave Murie University of Dundee

2. The problem Evolution Devolution Revolution

3. The Dundee history • Web pages started by Librarian; some liaison with IT Services • Later transferred to IT Services UNIX operation • About 10 departments had home pages by 1995 • Already a Web-support e-mail list

4. But • No one taking overall ownership of information • Library? • IT Services? • Admin. function? • No overall look and feel • Some gripes

5. Yet • Not all gloom • Sep/Oct 96 issue of Netuser identified Dundee as "one of the best university sites" • Partly because of varied skills of original protagonists (librarian + psychologist) • Avoid losing baby with bath water

6. Electronic Publishing Editorial Board (EPEB) • Formed 1995 • Reports to University’s Information Services Committee (ISC) • Reasonably high profile committee

7. Stakeholder approach • Includes Director IT Services, Librarian, 2 Deputy Secretaries, Information Officer, 2 senior managers IT Services • Later expanded to include academic reps (including HCI interests) and Head of School of Design • Also legal specialists from Research & Innovation

8. EPEB mission • Look at extent to which University could have consistent & unified CWIS policy

9. EPEB agenda (self-initiated) • Aesthetic guidance • Distributed responsibility • Code of practice for webmasters • Meet legal & ethical obligations • Aim for protection, not censorship • Retain control of info obtained via dundee.ac.uk domain

10. Agreed model • WWW to be platform • IT Services responsible for service infrastructure • Info providers responsible for authoring & production • Home pages to be under control of EPEB • Current “home page” too long

11. Aesthetics Function One of life's eternal triangles Technology ”Techies” “Designers” Users (consumers & providers) Needs Help!

12. Strategy • 2 subcommittees • Code of Practice • Web design • EPEB to have own e-mail list • Recently merged School of Design employed to redesign Web • Funding from SHEFC

13. Goal alignment • Design team not experienced in Web technology • Computer Science: interests in disabled • Postgraduate student project to focus on restructuring • 4 teams of 4 students • 2-way flow ensured HCI needs kept in mind & designs subject to test

14. Identified user groups • Potential students, business users, local users (staff/current students), academic users from other sites • Need to cater for physically challenged

15. Stakeholders Service Depts Academic Depts Researchorganisations Staff DundeeWeb Students Press/media Prospective students

16. Students’ verdict • Present site confused • Look for ease of learning, ease of use, increase of speed to achieve task • Major challenge to create structure reader can navigate without getting lost • Hierarchy not too deep nor shallow

17. EPEB verdict • Too much info in cramped layout • Initial page needs splitting • 2 separate needs: intra- and inter-organisational • Quality of visual image of “lower standard” than many other universities • Important for increasing trend in student recruitment

18. EPEB verdict • More prominence to Dept pages • Load quickly • Some “quick fix” temporary redesign by IT Services • Media Services also volunteered some sample redesigns

19. Quick fix response • Faster logo • More consistent style • Heading format which departments could optionally copy • Offer of help from School of Design (recently merged with art college) • Village approach -- good ideas at conceptual & design levels available within University

20. User tests • Old system inadequate • Cluttered with information so not easy to use • Needs clearer general layout • More logical title grouping • Masses of links difficult to track • Intimidating to new user

21. Goals identified • Showcase departments & courses • Communicate University mission • Publish corporate communications (e.g.. press releases) • Recruit new students

22. Addressing needs • Academic system users: best highly graphic design • Those with slower links will not like high graphic content • Disabled: learning disabled prefer graphics to text but blind can only use text

23. Design brief • Appeal to wide range of target audiences (internal & external) • Offer easy navigation with distinctive & innovative look • Reflect University’s desired image

24. What happened next • Design School showed samples of existing Web-based work • Very “designed”. Worries about practicability of downloading • Project set up & promised several options

25. Design approach • Cater for universal audience • For identity, only universal thing is heraldic element • 3D button, animation • Coloured backgrounds: a laid paper • 8-tier kind of menu • Lozenge lines of buttons

26. But • Not dynamic, so looked at existing stock of library photographs • For faculty home pages & secretariat • Provide a library for depts who want to improve their home pages to fit, but not mandatory • Debate about accessibility • Plea for some testing

27. Iterative design Design School Web Administrators EPEB Applied Computing (Postgraduate teams)

28. Deliverables • New designs develop through 3 layer structure becoming simpler at the lower levels • Faster downloads • Break down visual elements for easier construction of sites around campus

29. Tests • Solves problems with older structure • Information clearer • More organised • New user learns more easily how site structured • Similarity to other University Web sites

30. Later refinements • Design refined for effective display on range of browsers • Too graphic for non-Janet usability & for blind students • Plan text-only version of main pages • Add Web search • Increase size of navigation buttons

31. Controversies • Paper backgrounds • Mac did not translate well to PC (Netscape Navigator defaults to 216colour palette) • Fast download for all browsers • Camel avoidance! • Web administrators a great help. Tightly focused issue, able to experiment, no camels!

32. + points • Use of multiple stakeholders • HCI, techies, design specialists, users, departmental webmasters • Supply of tool-kit (page generator, buttons, lozenges etc..) • Good compromise of capability with practicability

33. - points • Many sites have yet to take their disabled visitors fully into account & the proposed design is no exception • Did need to hold back some individuals from latest Javascript functions -- problems with earlier browsers • Moving globe: Quicktime • Frustrating medium for designers!