2006 Integrated Studies 2: Website Design Project University of Sussex - Informatics

2006 Integrated Studies 2: Website Design Project

University of Sussex - Informatics

Presentation Structure

Introductions and ManagementTeam Contributions

Demo and Conclusions

Questions & Answers

1

Introductions and Management

AssignmentOverview

ManagementTools

PresentationStructure

ManagementApproach

2

Overview of the Assignment

3

What is interdisciplinary?

Why interdisciplinary?

Barriers for interdisciplinary.

Learning Points

4

Differences between interdisciplinarity and multidisciplinarity.

How can we achieve interdisciplinarity.

Working in a team. (from different disciplines).

Understanding different perspectives.

Introduction to the Presentation

5

Order

Topic Presenter Picture

1 Assignment Overview Vikram

2 Intro to the presentation

Max

3 Management / Tools Hannah / Jon

4 Content Yash / Alicja

5 Design Antonia / Cy

6 Coding George / Louis / Sudhagar

7 Testing David / Sudhagar

8 Website Demo Zulfi

9 Interdisciplinarity Aaron / Josey

10 Conclusion Hannah

Introductions & Management

Team Contributions

Demo & Conclusion

The Presentation

6

The Starting Point

The Format / Look and Feel

Putting it all together

Management Approach

7

Fussy Beginnings

Skills Matrix

No Micro Management

Open Communication

Status Updates

Celebrate Successes

Management Tools

8

Backpack

Basecamp (Inuda)

Blogger (IS:A Diary)

Team Contributions

Content Team

TestingTeam

DesignTeam

CodingTeam

9

The Content Team

Content Team

TestingTeam

DesignTeam

CodingTeam

10

Content Team - 1

11

Yash’s sound recording…

Content Team - 2

12

YASH

CY

ALICJA

JOSEY

Content Team - 3

13

Spring TermIntegrated Studies II – the reason why this website was created! That’s what you call integration! Software Design and Evaluation – your chance to learn how to use Macromedia Director for rapid prototyping. You will design an interface and basic functionality of an application, test it with users and then document it in UML, yumm…

Modules’ descriptions are meant to give prospective students a better idea about the nature of each course than the dry ‘official’ briefs.

Content Team - 4

14

AARON & JOSEY

EVERYBODY

Content Team - 5

15

AARON

EVERYBODY

Content Team - 6

16

ANTONIA

Content Team - 7

17

YASH

ALICJA

CY

Content Team - 8

18

Statistics of graduates’ employment turned out to be very poor so I tried to get in touch with last year’s graduates and ask them what they are currently doing and in what ways was the course useful for their career.

“My job is ‘Graduate Software Engineer’, the industry is Defence. HCCS was of use as I am in the HCI team, so I am using HCI techniques for designing the interfaces and I use UML design techniques for the requirements spec, etc…”

Content Team - 9

19

The Design Team

Content Team

TestingTeam

DesignTeam

CodingTeam

20

Design Team

21

Home Page HCCS

A World Without HCI

Blog

Course Modules

Dissertations

Current Student Profiles

Past Students

Employeers

University

Brighton

University

Map

Map

HCI

Design Approach

22

Structure Content (IA)

IA approaches

Select approach

Design lo-fi prototypes for all pages

Design hi-fi prototypes for all pages

Design Team - 1

23

-About Course

-A world without HCCS

-Blog

-Course Modules

-Dissertations

-Student Profiles

-Past Students Alumni

-Employers and Jobs

-University Photos/Map

-Brighton links

-What

-How

-Why

-The course

-2005-2006

-How to apply

-After the course

Approach A Approach B Approach C

Approach A

24

-About Course

-A world without HCCS

-Blog

-Course Modules

-Dissertations

-Student Profiles

-Past Students Alumni

-Employers and Jobs

-University Photos/Map

-Brighton links

About Course

…

Student

profiles

Blog

Approach B

25

-What

-Why

-HowHCCS article

What

…

…

…

Why

…

…

…

How

…

…

…

Approach C

26

-The course

-2005-2006

-How to apply

-After the course

The course

…

2005-2006

…

After the

course

…

How to apply

…

Low Fi Prototypes (Home page)

27

Low Fi Prototype (Global Template)

28

Low Fi Prototypes (Content Frame)

29

Low Fi Prototypes (Content Frame)

30

High Fi Prototype A

31

Sudhagar

High Fi Prototype B

32

Vikram

High Fi Prototype C

33

Antonia

High Fi Prototype D (Home Page)

34

High Fi Prototype D (Main Template)

35

High Fi Prototype D (Main Template)

36

High Fi Prototype D

37

The Coding Team

Content Team

TestingTeam

DesignTeam

CodingTeam

38

Coding Team – 1

39

Coding Team – 2

40

Coding Team – 3

41

Coding Team - 4

42

Coding Team - 5

43

Coding Team - 6

44

Coding Team - 7

45

Coding Team - 8

46

function toggle (area) { // if element is hidden, show it to me! if (document.getElementById(area).style.display=='none') { document.getElementById(area).style.display=''; } // if it's visible, hide it please else { document.getElementById(area).style.display='none'; } }

Coding Team - 9

47

// hide all areas that are not supposed to be shown when page rendersfunction hideAreas() {

toggle("divUserExperienceDesigner");toggle("divWirelessUIDesigner");toggle("divUserInteractionDesigner");toggle("divInformationArchitect);

Coding Team - 10

48

<ul> <li><strong onclick="toggle('divUserExperienceDesigner');"> User Experience Designer </strong> <div class="desc" id="divUserExperienceDesigner"> <p>The QUALCOMM User Experience Group (QUE) is seeking user experience

Coding Team - 11

49

Coding Team - 12

50

The Testing Team

Content Team

TestingTeam

DesignTeam

CodingTeam

51

Background

52

• Testing originally scheduled for Week 9

not enough time

site not yet completely finished

• Therefore, allocated at last minute with limited time to complete

• Indicative of programming projects?

Alicja completed ALL of the proofreading

Methodology

53

• Due to limited time; a heuristic evaluation methodology

• Jacob Nielsen’s 10 heuristics plus a walkthrough using a persona

• Nielsen recommends 5 evaluators; typically finding 75% of usability problems

Personnel

54

Lead testers

Testers

David Hannah Aaron Vikram

We had 4 evaluators…..

Heuristics

55

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

Results of Heuristics 1

56

Evaluator 2005 2006 Diffp1 61 75 14p2 53 63 10p3 49 64 15p4 46 64 18

AVERAGE 52 67 14

• Scores out of 10 for each of 8 heuristics

• Totals…

0

10

20

30

40

50

60

70

80

p1 p2 p3 p4

Evaluator

2005

2006

57

Usability Problems2005

• ‘Home’ button doesn’t work

• Navigation is plural – multiple links to same pages

• Not always clear what is clickable and what is not; pictures, words, icons

• Layout of links on separate pages is different breaking internal consistency

• Unclear terminology

• Mouse-over guides to links only on home page

• No physical representation of current location (breadcrumbs etc)

• Phidgets link should open a new window

2005

• ‘Home’ button doesn’t work

• Navigation is plural – multiple links to same pages

• Not always clear what is clickable and what is not; pictures, words, icons

• Layout of links on separate pages is different breaking internal consistency

• Unclear terminology

• Mouse-over guides to links only on home page

• No physical representation of current location (breadcrumbs etc)

• Phidgets link should open a new window

2006

• Home button is not immediately clear as such and is unusually on right-hand side

• Need to scroll down to see bottom of home page

• Blogger link should open a new window

2006

• Home button is not immediately clear as such and is unusually on right-hand side

• Need to scroll down to see bottom of home page

• Blogger link should open a new window

Results of Heuristics 2

Persona Evaluation

58

Name: Carla Fernandez

Age: 25

Sex: Female

Student: Part-time

Carla Studied Information Science at Universidade Nova de Lisboa in Portugal. After she graduated she worked for a software development company in Lisbon specialising in innovative applications for the media industry. Her interest in the gaming industry brought her to work for a company specialising in fantasy adventure games where she met her current partner, Jon. Carla’s interest interactive learning and games applications has nurtured an interest in HCI. So much so that the company have offered to sponsor her to study for a Masters degree in the subject. Her project manager has requested that she look for a University offering a course on a part-time basis. This would allow Carla work and contribute her enhanced knowledge and skills to various projects within the company out of term time.

Created by Josey

Persona Evaluation

59

2005 Website

Persona evaluation

• directed more toward content than strictly usability problems

• not used as a means of comparison….

But…..

Cursory run through of 2005 site:

• Possibly of interest if personally know the people featured, but really gives very little information about the course

Persona Results 1

60

Home Page• Blogger icon – looks like branding not necessarily an external link

• World without HCCS looks like an error message. If this is the first link the user goes to – first impression is poor – too much text – maybe as link off one of main pages?• Animation is off screen – and although is nice is slightly irrelevant to site

• But very clean, uncluttered and inviting Home page

Persona Results 2

61

General FeedbackPlus +Plus +

• Excellent navigation – colour coded, blocks act as “You are here”

• Clear & Concise, can show more or less info depending on preference

• No confusing terminology

• Gives student’s eye view of course and gives users good idea of kind of people doing course and why they did it

• Almost all content novel, unique and not available elsewhere

Minus –Minus –

• Clickable picture is great, but needs text invitation to click

• Info on How to Apply Page available elsewhere – perhaps a more, informal realistic view?

• No information specifically for foreign students

Critique of Technique

62

Heuristic Evaluation • Nielsen’s heuristics not ideal for web pages

Two questions not relevant

Others had to be ‘interpreted’

Persona Evaluation

• Hardly a ‘classical’ evaluation technique

No User Evaluation• Not sufficient time

Demo and Conclusions

WebsiteDemo

Q & A

Interdisciplinarity

Conclusion

63

Website Demo

64

Http://cy.ekei.com/projects/is2/

Interdisciplinarity - 1

65

Interdisciplinarity is the practice of forming an alliance (-inter) between two or more disciplines (-disciplinarity), producing either a product (in industry) or a disciplinary hybrid (in academia) that is identifiable from methodologies or tools appropriated interchangeably from the progenitors.

Interdisciplinarity - 2

66

Did the project follow interdisciplinary practice?

The focus of the course was for the class to work as project team and follow an interdisciplinary approach to designing a website aimed at prospective HCCS students.

In order to assess the effectiveness of these aims, we examined the project team’s methods of practice from 2 perspectives:

•Whether the 'Content' team worked in an interdisciplinary way

•Whether all the project teams worked across ‘’disciplinary boundaries” in an interdisciplinary way?

In order to consider these aspects we consulted each member of the team to gain feedback particularly with regard to the following:The underlying methods of practice within the project and whether they were influenced by an interdisciplinary approach.The methods of communication and their effectiveness in supporting the team and their tasks

Interdisciplinarity - 3

67

Interdisciplinarity and the content team:

Very early on, to facilitate effective movement through the stages of development, the project was broken down into several clearly demarcated domains.

•Content •Code •General Management•Design

Here we will discuss Interdisciplinarity with reference to the content project domain.

Interdisciplinarity - 4

68

The content team (below) all brought with them a variety of skills and aptitudes:

'X' refers to aptitudes & 'O' refers to areas people wanted to learn more about

The skills matrix demonstrates that with the exception on Antonia, all the content crew felt that the requirements of the ‘content’ domain fell within their expertise.

HTML XML Graphics Analysis Content PM Testing/Usability

Antonia 0 x x

Josey 0 x x x

Yash x x x x

Alicja 0 x x x

Aaron 0 x x x 0

David 0 0 x x x

Interdisciplinarity - 5

69

Designing the content:

Brainstorming commenced discussing issues of Content and a short list of ideas was generated. We then discussed these ideas in relation to whether each was useful/helpful/imperative in achieving the goal. A ‘pruning’ exercise was then conducted in which irrelevant stuff was ditched. We concluded with a to-do-list of items each of which was assigned to team members.It is hard to imagine at what stage this exercise might have been interdisciplinary as no one person or sub-group within the content team could be identified as a practitioner of a particular approach.

Interdisciplinarity - 6

70

Designing the content cont…..

The entire group (not just content) could be roughly divided into two camps. Those with a Social Science background and those with a Computer Science background.The Social Scientists tended towards requirements gathering and testing whist the Computer Scientists were comfortable with Coding, HTML and design.At the initial, and most important content team meeting, Kyriakos, the head of the design team sat in to advise us on how well the sorts of information we were gathering would make the transition to an electronic format. Here a dynamic tension was created between the content and design team where the format of the content gathered was steered by design logistics. The boundaries of design were in turn pushed by the creative content team. This, perhaps our only true interdisciplinary moment, allowed these two cogs (design and content teams) to work effectively. The grease for these cogs being the common language afforded by our recent, shared academic history.

Interdisciplinarity - 7

71

Did each group follow an interdisciplinary approach?

Following a survey completed by team members similar issues were found to be common to all teams. Our findings revealed that a lot of us felt that we mostly worked in a multidisciplinary way – using our individual specialist knowledge (or personal preferences) to contribute to the Project. Perhaps this was due to the way we used the skills matrix - matching roles to team members who had previous experience within those roles. If we had used the matrix in an alternative way by ensuring we all worked within teams comprising members with different specialist knowledge we would have followed an Interdisciplinarity approach far more closely. But would we have delivered the project within the deadline? For many of us one of the underlying factors preventing Interdisciplinarity was that of time constraints.

Interdisciplinarity - 8

72

Did each group follow an interdisciplinary approach?

Following a survey completed by team members similar issues were found to be common to all teams. Our findings revealed that a lot of us felt that we mostly worked in a multidisciplinary way – using our individual specialist knowledge (or personal preferences) to contribute to the Project. Perhaps this was due to the way we used the skills matrix - matching roles to team members who had previous experience within those roles. If we had used the matrix in an alternative way by ensuring we all worked within teams comprising members with different specialist knowledge we would have followed an Interdisciplinarity approach far more closely. But would we have delivered the project within the deadline? For many of us one of the underlying factors preventing Interdisciplinarity was that of time constraints.

Interdisciplinarity - 9

73

HCCS - and Interdisciplinarity

There is an argument to be made that suggests that while not interdisciplinary in the practice of producing this website, the practice we did employ is the product of interdisciplinary precedents.The HCCS course is itself an Interdisciplinary domain and we have learnt its domain specific language. It is our first tongue and the methodologies acquired on this course are our only tools for approaching HCCS concerns.Our actual practice is therefore unlikely to be interdisciplinary as all the methodologies we have acquired over the last two years on this course are HCCS specific; furthermore, we have acquired these skills together. Thus, while we have leanings (and indeed historical legacies) towards certain domains (either social science or comp science), we were keen to use our new skills to build this site. Thus we have not applied the characteristically different methodologies required for true interdisciplinary practice. In conclusion, we believe that our performance as a team has demonstrated that productive practice can be generated through multidisciplinary working; effective informal communication between the teams ensuring that cross-team concerns are addressed.As a result, it is felt that our team’s collaboration has generated a unique approach to the web site which should be a refreshing change from the sites of previous years.

74

Conclusion

Fin

75

Questions & Answers