human-computer interaction (graphic design)

8/14/2019 Human-Computer Interaction (Graphic Design)

1/14


2/14

Metaphor

Harvard UniversityThis site uses letterbox type of design. In this site, the designer chose a

letterbox design to avoid the screen problems of having too much text on the screen.Typical of letterbox designs, this site uses a navigation bar or clickable graphic that may

be viewed at resolutions of 640x480 and higher without cropping, distortion, or the need

for scrolling.

The navigation bar is also a rollover. So that, when the user places the cursor on

top of a clickable area on the navigation bar, the graphic changes in order to signal

some kind of navigation cues to the end user. Also, as is typical of letterbox designs, this

site repeats the same design elements throughout the site. Users will find the same

navigation bar using the same rollovers on every screen, and users will find the same

header block with key words (in the same size and type of font) at the top of each screen,

signaling the purpose and main idea of each screen to the users.

Oxford UniversityThis site uses the inverted-L format. This type of design looks like an L that has

been turned upside down and flipped. In this site, a designer might choose to reduce the

size of the logo and name at the top in order to create space for a high-level navigation

bar that will take users to major divisions in a site. Then the table of contents area along

the bottom side on its home page might be used for navigation with the subsections of

each major division.


3/14

Clarity

Harvard UniversityIn this site, the designer collects simple photographs that are in sync with

universitys mission or philosophy. This site attaches some explanatory text for the user

when they highlight the content on the right top navigation bar. The overall design of this

site is clear and intuitive so the user can navigate the content easily.

Oxford UniversityThis site is quite different with Harvard Universitys site. This site does not attach

explanatory text in the content of its home page. The designer must have considered that

this sites already clear and does not need it. This site also use s the white space in itscontent pages to provide symmetry and balance.


4/14

Consistency

Harvard UniversityThe designer might use this design to maintain consistency among the pages or

panels of a multiple-view document. So the users easily can explore this site, know what

should they do and where should they go. For example, in this site, when we choose

college on the right top navigation bar, and then choose Academic Program on the

left side, we will get the same platform. Columns are applied consistently and rationally

(three-column layout) for overview pages with multiple links. All tables in content pages

use the same layout, colors and fonts.


5/14

Oxford UniversityIn this site, the designer makes sites easier to use, because the users do not have to

learn new tricks as they move around. For example, a user who encounters the Search

at the top right on one page will easily moved to different locations on other pages of the

site because the site is internally consistent.


6/14


7/14

Alignment

Harvard UniversityThe Harvard Universitys site uses left alignment on its screen. Left alignment is

standard for body text in Western documents. Its tone tends to be neutral, objective, and

scientific. The designer maybe used this alignment in this site to balance a large picture

or text block.

Oxford UniversityIn general, we usually keep one major alignment in a document, such as left,

center, and right. But, in this site, the designer mixed left and center alignment on its

screen. It might be used for screen with high resolution. So, it will be useful for

navigation without causing disorder in serving the information on home page.


8/14

Proximity

Harvard UniversityProximity is one of the two most general and powerful grouping information

strategies. Proximity uses Gestalt principle, which attends on closing the objects to each

other that have related. In Harvards site, the grouping almost uses proximity than use

similarity. Different with proximity, similarity use an orientation, color, shape, or texture

to make a relation in the grouping.

Many kind methods to make visualization on grouping likes use a group box or

make a list which is the point of list was closed. Harvard sites never use the grouping

box, it always use a list orientation. But if we attend it, the grouping not clear, from the

name or from the method which is used. We cant assume that use proximity or

similarity.

Oxford UniversityLittle different with Oxfords Site, we can see the grouping information is clearer

than Harvards site. We can see the point o f list COLLEGES, all the point have

relation to the main list, it is about College. In this site also use two kinds of grouping,

similarity and proximity. In the picture below the site uses proximity.


9/14

In the picture below the site use similarity grouping, where the list of links is like

each other. The site also uses the grouping box. It makes clearer on the grouping field,

but not in the font.

Contrast

Harvard UniversityWe know the Harvard site use modern template, it makes this site is very contrast.

Everything which we want, it is provided. The font is clear, so we can find the important

information in every part. The flying object and slide also make the information more

complete.

Explanation every part is clear, with the fonts and background which relevant.

The important element which appears in the all part is Search. The element is easy to be

found on the corner or bottom page. Why the Login Form doesnt appear in the all part?

It is caused the Login Form is only used for the authentication.


10/14

Oxford UniversityOxford site use white background which often use the silver font or blue. The

situation can make the user confuses about the information. Little font and thin font are

always in the part of pages site. Like Harvard site, Oxford site also use the search engine

on all pages.

Oxford site doesnt use flying object or text but use slide and many little pictures.

It is very different with the Harvard site. Harvard site is full with flying object. Oxford

site is casual and many thinks which is provided, but sometimes we dont know the

important.

We often find the ambiguous figure-ground contrast that we cant easily resolve

what is placed in front of and what is in back.

Economy of Visual Elements

Harvard UniversityIt is very important thing if we want to develop a website. Economic strategy is

used for consideration on design element. Harvard site is full color. Perhaps it makes the

site runs slowly, but when we click some links or a button to move another page, the site

runs fast.After we attend deeper, we find the answer. The Harvard site uses the minimal

data text. Although the font is big more than Oxford, the information on the page is not as

many as on the Oxford site page.On the home page, which is every person start to access the site, Harvard Site

uses the Border Font, but on other side it uses little data base and links. Harvard is more

comfortable on menus or subs menu.


11/14

Oxford UniversityThe strategy Harvard site designer is making a home page with many information,

but use the little font, blank page on the back ground and less picture than Harvard Site.

The designer wants to show us the simple site but full information. Little different with

Harvard site, Oxford site uses white background in all subs menu or subs page. Although

many links in the home page will make the site runs slowly.

Coding Techniques

Harvard UniversityIn the university college usually doesnt use the video on the front page. So it

makes simple the site. Generally the university site is simple to show the information.

But, different with Harvard site, it uses many color and designs technology. So, it needs

strategy when the developer want to make it runs fast and smoothly.


12/14

Oxford UniversityLittle different with Harvard, Oxford uses the Media library, like Video and

Audio. Blog is also provided by Website. The media to save the huge data also have to be

attended. We know the database in this site can not be doubt.

The developer of the Oxford site uses many strategies to make a simple

visualization an informative. White background is one of the strategy to make the site can

run smoothly and fast.


13/14

Typography

Harvard UniversityThe Harvard Universitys site uses all upper case on their university name

HARVARD UNIVERSITY and their menu, for example, SCHOOLS, OFFICE, etc.

There is not much text in this site, they replace their text into picture, except the

discourse, story, etc. In their text, they use medium font size and medium space, so its

easy to read a lot of text.

Oxford UniversityThe Oxford Universitys uses all upper case on their university name

UNIVERSITY OF OXFORD and their menu, for example, NEWS & EVENTS, IN

THEIR FOOTSTEPS, etc. There is much text in this site, because they do not uses a lot

of picture. They use small font size. But the space is medium, so its quite easy to read a

lot of text.

Font

Harvard UniversityThe Harvard Universitys site uses 2 different type font. It is Georgia and

Helvetica. There are words use bold and underline together. This sites uses 3 point size.

The font color is red and the background is black, so the words are clear to read.

Oxford UniversityThe Oxford Universitys uses just one standard font type,its Arial. There arent

words use bold and italic, only normal and capital words. This sites uses 1 point sizes.

The font color is white and the background is blue.

Color

Harvard UniversityThe Harvard Universitys site uses black combine grey color at the background.

For the words, this sites uses white and red color. The background color is darker than

the words, so the words easier to read.

Oxford UniversityThe Oxford Universitys uses blue color only. But, this site uses dark blue, soft

blue and other lightness or darkness color. All the words use white color.


14/14

Icon Design

There is not icon in the both web. But, the site replaces the icon into picture although the

pictures havent same function with the icon.

human-computer interaction (graphic design)

Documents