Charisma or camel?Charisma or camel? A sociotechnical A sociotechnical approach to Web approach to Web

redesignredesignDave MurieDave Murie

University of DundeeUniversity of Dundee

The problemThe problem

Evolution

Devolution

Revolution

The Dundee historyThe Dundee history Web pages started by Librarian; Web pages started by Librarian;

some liaison with IT Servicessome liaison with IT Services Later transferred to IT Services UNIX Later transferred to IT Services UNIX

operationoperation About 10 departments had home About 10 departments had home

pages by 1995pages by 1995 Already a Web-support e-mail listAlready a Web-support e-mail list

ButBut No one taking overall ownership of No one taking overall ownership of

informationinformation Library?Library? IT Services?IT Services? Admin. function?Admin. function?

No overall look and feelNo overall look and feel Some gripesSome gripes

YetYet Not all gloomNot all gloom Sep/Oct 96 issue of Sep/Oct 96 issue of NetuserNetuser identified identified

Dundee as "one of the best university Dundee as "one of the best university sites"sites"

Partly because of varied skills of Partly because of varied skills of original protagonists original protagonists (librarian + (librarian + psychologist)psychologist)

Avoid losing baby with bath waterAvoid losing baby with bath water

Electronic Publishing Electronic Publishing Editorial Board (EPEB)Editorial Board (EPEB) Formed 1995Formed 1995 Reports to University’s Information Reports to University’s Information

Services Committee (ISC)Services Committee (ISC) Reasonably high profile committeeReasonably high profile committee

Stakeholder approachStakeholder approach Includes Director IT Services, Librarian, Includes Director IT Services, Librarian,

2 Deputy Secretaries, Information 2 Deputy Secretaries, Information Officer, 2 senior managers IT ServicesOfficer, 2 senior managers IT Services

Later expanded to include academic Later expanded to include academic reps (including HCI interests) and Head reps (including HCI interests) and Head of School of Designof School of Design

Also legal specialists from Research & Also legal specialists from Research & InnovationInnovation

EPEB missionEPEB mission Look at extent to which University Look at extent to which University

could have consistent & unified could have consistent & unified CWIS policyCWIS policy

EPEB agenda EPEB agenda (self-initiated)(self-initiated) Aesthetic guidanceAesthetic guidance Distributed responsibilityDistributed responsibility Code of practice for webmastersCode of practice for webmasters Meet legal & ethical obligationsMeet legal & ethical obligations Aim for protection, not censorshipAim for protection, not censorship Retain control of info obtained via Retain control of info obtained via

dundee.ac.uk dundee.ac.uk domaindomain

Agreed modelAgreed model WWW to be platformWWW to be platform IT Services responsible for service IT Services responsible for service

infrastructureinfrastructure Info providers responsible for authoring Info providers responsible for authoring

& production& production Home pages to be under control of Home pages to be under control of

EPEBEPEB Current “home page” too longCurrent “home page” too long

Function

One of life's eternal One of life's eternal trianglestriangles

””Techies”Techies”

Users Users (consumers & (consumers & providers)providers)

““Designers”Designers”

Technology

Help!

Aesthetics

Needs

StrategyStrategy 2 subcommittees2 subcommittees

Code of PracticeCode of Practice Web designWeb design

EPEB to have own e-mail listEPEB to have own e-mail list Recently merged School of Design Recently merged School of Design

employed to redesign Webemployed to redesign Web Funding from SHEFCFunding from SHEFC

Goal alignmentGoal alignment Design team not experienced in Web Design team not experienced in Web

technologytechnology Computer Science: interests in disabledComputer Science: interests in disabled Postgraduate student project to focus Postgraduate student project to focus

on restructuringon restructuring 4 teams of 4 students4 teams of 4 students

2-way flow ensured HCI needs kept in 2-way flow ensured HCI needs kept in mind & designs subject to testmind & designs subject to test

Identified user groupsIdentified user groups Potential students, business users, Potential students, business users,

local users (staff/current students), local users (staff/current students), academic users from other sitesacademic users from other sites

Need to cater for physically Need to cater for physically challengedchallenged

StakeholdersStakeholdersService Depts Academic Depts

Staff

Students

Prospective students

Researchorganisations

Press/media

DundeeWeb

Students’ verdictStudents’ verdict Present site confusedPresent site confused Look for ease of learning, ease of use, Look for ease of learning, ease of use,

increase of speed to achieve taskincrease of speed to achieve task Major challenge to create structure Major challenge to create structure

reader can navigate without getting reader can navigate without getting lostlost

Hierarchy not too deep nor shallowHierarchy not too deep nor shallow

EPEB verdictEPEB verdict Too much info in cramped layoutToo much info in cramped layout Initial page needs splittingInitial page needs splitting 2 separate needs: intra- and inter-2 separate needs: intra- and inter-

organisationalorganisational Quality of visual image of “lower Quality of visual image of “lower

standard” than many other universitiesstandard” than many other universities Important for increasing trend in student Important for increasing trend in student

recruitmentrecruitment

EPEB verdictEPEB verdict More prominence to Dept pagesMore prominence to Dept pages Load quicklyLoad quickly Some “quick fix” temporary redesign Some “quick fix” temporary redesign

by IT Servicesby IT Services Media Services also volunteered Media Services also volunteered

some sample redesignssome sample redesigns

Quick fix responseQuick fix response Faster logoFaster logo More consistent styleMore consistent style Heading format which departments could Heading format which departments could

optionally copyoptionally copy Offer of help from School of Design (recently Offer of help from School of Design (recently

merged with art college)merged with art college) Village approach -- good ideas at conceptual Village approach -- good ideas at conceptual

& design levels available within University& design levels available within University

User testsUser tests Old system inadequateOld system inadequate Cluttered with information so not Cluttered with information so not

easy to useeasy to use Needs clearer general layoutNeeds clearer general layout More logical title groupingMore logical title grouping Masses of links difficult to trackMasses of links difficult to track Intimidating to new userIntimidating to new user

Goals identifiedGoals identified Showcase departments & coursesShowcase departments & courses Communicate University missionCommunicate University mission Publish corporate communications Publish corporate communications

(e.g.. press releases)(e.g.. press releases) Recruit new studentsRecruit new students

Addressing needsAddressing needs Academic system users: best highly Academic system users: best highly

graphic designgraphic design Those with slower links will not like Those with slower links will not like

high graphic contenthigh graphic content Disabled: learning disabled prefer Disabled: learning disabled prefer

graphics to text but blind can only graphics to text but blind can only use textuse text

Design briefDesign brief Appeal to wide range of target Appeal to wide range of target

audiences audiences (internal & external)(internal & external) Offer easy navigation with distinctive Offer easy navigation with distinctive

& innovative look& innovative look Reflect University’s desired imageReflect University’s desired image

What happened nextWhat happened next Design School showed samples of Design School showed samples of

existing Web-based workexisting Web-based work Very “designed”. Worries about Very “designed”. Worries about

practicability of downloadingpracticability of downloading Project set up & promised several Project set up & promised several

optionsoptions

Design approachDesign approach Cater for universal audienceCater for universal audience For identity, only universal thing is For identity, only universal thing is

heraldic elementheraldic element 3D button, animation3D button, animation Coloured backgrounds: a laid paperColoured backgrounds: a laid paper 8-tier kind of menu8-tier kind of menu Lozenge lines of buttonsLozenge lines of buttons

ButBut Not dynamic, so looked at existing Not dynamic, so looked at existing

stock of library photographsstock of library photographs For faculty home pages & secretariatFor faculty home pages & secretariat Provide a library for depts who want to Provide a library for depts who want to

improve their home pages to fit, but not improve their home pages to fit, but not mandatorymandatory

Debate about accessibilityDebate about accessibility Plea for some testingPlea for some testing

Iterative designIterative designDesign School

EPEB

Applied Computing(Postgraduate teams)

Web Administrators

DeliverablesDeliverables New designs develop through 3 layer New designs develop through 3 layer

structure becoming simpler at the structure becoming simpler at the lower levelslower levels Faster downloadsFaster downloads Break down visual elements for easier Break down visual elements for easier

construction of sites around campusconstruction of sites around campus

TestsTests Solves problems with older structureSolves problems with older structure Information clearerInformation clearer More organisedMore organised New user learns more easily how site New user learns more easily how site

structuredstructured Similarity to other University Web Similarity to other University Web

sitessites

Later refinementsLater refinements Design refined for effective display Design refined for effective display

on range of browserson range of browsers Too graphic for non-Janet usability & Too graphic for non-Janet usability &

for blind studentsfor blind students Plan text-only version of main pagesPlan text-only version of main pages Add Web searchAdd Web search Increase size of navigation buttonsIncrease size of navigation buttons

ControversiesControversies Paper backgroundsPaper backgrounds

Mac did not translate well to PC (Netscape Mac did not translate well to PC (Netscape NavigatorNavigator defaults to 216colour palette) defaults to 216colour palette)

Fast download for all browsersFast download for all browsers Camel avoidance!Camel avoidance!

Web administrators a great help. Tightly Web administrators a great help. Tightly focused issue, able to experiment, no focused issue, able to experiment, no camels!camels!

+ points+ points Use of multiple stakeholdersUse of multiple stakeholders

HCI, techies, design specialists, users, HCI, techies, design specialists, users, departmental webmastersdepartmental webmasters

Supply of tool-kit (page generator, Supply of tool-kit (page generator, buttons, lozenges etc..)buttons, lozenges etc..)

Good compromise of capability with Good compromise of capability with practicabilitypracticability

- points- points Many sites have yet to take their Many sites have yet to take their

disabled visitors fully into account & disabled visitors fully into account & the proposed design is no exceptionthe proposed design is no exception

Did need to hold back some individuals Did need to hold back some individuals from latest Javascript functions -- from latest Javascript functions -- problems with earlier browsersproblems with earlier browsers

Moving globe: QuicktimeMoving globe: Quicktime Frustrating medium for designers!Frustrating medium for designers!