Web Design

Lecture 1, Introduction to Web Design,

Information Architecture, Business StrategyVladimir Tomberg, PhD

Estonian Entrepreneurship University

of Applied Sciences

March 2016

Pic

ture

sou

rce:

http

://us

erce

nter

edco

nten

t.com

Reporting Homework

• What topic you have selected for the course project?

• Why exactly this choice?• Do you have a real client for this web site?

2

INTRODUCTION TO WEB DESIGN

3

World Wide Web (= W3, w3, WWW)

• An information system on the Internet which allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another

4

World Wide Web

5

• The World Wide Web (WWW) is an open source information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet.

Gospel: the Early Hypertext

6

Map of World Wide Web

7

8

Tim Bernes-Lee

The World Wide Web was invented by English scientist Tim Berners-Lee in 1989. He wrote the first web browser in 1990 while employed at CERN in Switzerland

9

Web Design

• Web design encompasses many different skills and disciplines in the production and maintenance of websites;

• The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization

10

Conceptual Model of Web Design

• Before we can decide what to do, we need to understand why to do it.

• Jeffrey Veen• The Art & Science of

Web Design

11

Publishing on a Paper and Online

• Web is an interplay of words and pictures —structured content and visual presentation. But the web also adds a third angle to the metaphor — that of behavior

• A user works with web using interactions: Buying tickets; Conversations in social networks; Online learning; Searching for information

12

A Model for Web Development: the Collaboration of Words, Pictures, and Code

13

Extended Model• Web extends the model “Text – Pictures -

Code” to model “Presentation – Structure - Behavior”

14

15

Presentation – Structure - Behavior

• Presentation: how that organization is presented visually to users

• Structure: how something is organized and optimized for ease of use and understanding

• Behavior: how those users then interact with the product and the product’s resulting behavior

From Code to Teams

16

The Bad Approach to Web Design

• There are programmers and visual designers, but no Information Architecture

17

INFORMATION ARCHITECTURE

18

19

Source Book

Peter Van Dijk Information Architecture for Designers: Structuring Websites for Business Success

Introduction to the Information Architecture

• Information Architecture(IA) is a quite new area in the Web Design;

• IA is different to the visual design and programming because it focuses on the structure of a web site, not on the appearance or functionality;

• IA aims building a web site, which is easy to use, and simultaneously corresponds to the goals of a business-client and end-users

20

Example: Web Site for Ordering Breakfast

21

The Bad Information Architecture

• The Bad Information Architecture is crinkly, contradictory and complex without any reasons;

• It makes usage of web sites to be harder

22

Another Example of Web Site for Ordering Breakfast

Good IA makes usage of web site as simple as possible

23

For What IA is Responsible?

• The main task for IA — organization of information on the web site, so end-users can find what they need and achieve their goals (for example – buying food in a big shop);

• So more happy the user, so more products and services she will buy. Happy user spend more time on site, that makes a profit;

• Information Architecture — is not a science about diagrams, rather that is science about communications

24

Information Architecture Tasks

1. User research: what people do to achieve their goals when visiting web site?

2. Defining content and functionality: how that can help users to achieve their goals?

3. Development of Organization Schemes: how web site should be organized?

4. Interface design together with a visual designer;

5. Tracking all those tasks in process of site building

25

IA in Real Life and in Web

26

Goals and Ways for Organizing Content

• There is an endless amount of ways for organizing the same set of information;

• Business goals and end-users goals help to define, what organization scheme we should use

27

Different Possibilities for Organization. Example 1

28

Different Possibilities for Organization. Example 2

29

Different Possibilities for Organization. Example 3

30

Different Possibilities for Organization. Example 4

31

IA Deliverables

• There is a variety of methods in IA; two of them are the most popular:1. Description of a site in terms of content and

functionality — mostly there are sitemaps;2. Functional description, which explains how web

site should work;• Level of detailing in both ways can be vary

32

List of Content and Organization

• IA is responsive for a list of al the content and its structure on the web site. This is often presented as a sitemap and content table

33

Content Table

34

Description of Functionality

• The functionality description and task flow describe how the web site works, how individual pages work together, and what tasks people can perform;

• The representation of this can take many forms, including scenarios and flow charts

35

36

Example: Scenario

• Returning user• Persona: Joe• Function: Suggest remembering breakfast• Scenario: Joe likes to have the same breakfast every

day. So every day he goes to the website and types in the same choices. After a while, the website notices this, and offers to remember his favorite breakfast. Joe hadn't noticed the small icon that offers that functionality and accepts the offer. From now on he only has to click one link to get the same breakfast.

Example: Flow Chart

37

38

Wireframes

• Like sketches of the user interface, wireframes show interface design without showing visual design. They indicate the buttons, links, content, and other interface elements on a page, and show relationships between the elements on the page;

• They are developed jointly by the information architect and the visual designer;

• Wireframes are useful because they let you focus on the structure of the user interface and iterate the design of that, without designing a time-consuming visual design every time

Example Wireframe

39

Homework 1

• Make a short description of your project: Web site title; What is the business of your client? (Size of company,

yearly turnover, staff, equipment, etc.); What are products and services? What is the target audience for this business? What are business tasks of the web site? (Sales growth,

advertizing of company, searching for partners, etc.);• Upload results to Google Drive

40

SITE STRATEGY

41

42

Site Strategy

• Strategy consists of a combination of user goals and business goals, and how you plan to address those;

• User goals are the reasons people will visit the website, and the things they want out of it;

• Business goals are the reasons the business is creating the website, and the things they want out of it;

• Defining these two groups of goals and how they interact is the first challenge of the information architect

43

When to Talk about Strategy?

• Strangely, strategy is often glossed over at the beginning of a project - more attention is given to the more tangible aspects of web developmentlike visual design and technology;

• When your client starts getting excited about visual elements (the colors on the homepage. Flash animation) or some cool new technology (XML .NET) before you have discussed strategy, refocus the conversation;

• Talking strategy at the outset of a project is crucial

44

Some Questions to Ask The Client at the Start of a Project

• Why are you building this website? What are the short- and long-term business goals? Can some of these goals be expressed in numbers?

(number of visitors, widgets sold, subscriptions...)• What will the business invest in the website?

How much money? Who will work on it? (remind them that websites need ongoing attention)

• Why will people visit the website: what are the user goals? Is there existing research on the target audience? Who is the website meant for? Why will the audience visit the website? How will they find it? What will they do on it?

Something about User Research

45Copyright: Dmitri Satin

The ROI of User Experience with Dr. Susan Weinschenk

http://www.youtube.com/watch?v=O94kYyzqvTc46

47

Examples of Business Goals• Keeping existing customers happy—it's often cheaper than trying

to win new customers;• Reaching new markets—selling worldwide;• Decreasing support spending—call centers are surprisingly

expensive. Provide customer support on the website that decreases support calls and the site will pay for itself;

• Creating a cost-efficient sales channel—fewer offices have to be built if you have an effective website: online banking is a good example;

• Increasing efficiency in the supply chain—this consists of the companies that supply you with the things you use to do business: automating this can save costs;

48

Examples of Business Goals (2)• Knowledge management—if department A tries to solve a

problem that department B already solved six months ago, a company loses money; an intranet can help avoid such situations;

• Testing new products and brands—testing new products on the web is an efficient and cheap way of testing if consumers like them;

• Lock in early adopters—if you get people to use your website, they will be reluctant to go to a competitor's website as long as they are happy. This is especially crucial for sites that aim to become personalized to the user over time, like personal finance or email

Table of Content Example

49

How Business Goals Influence Design?

• Comparing the main web pages of sites — a good exercise to understand that

50

AmericanAirlines, aa.com

51

AmericanAirlines, aa.com

52

Advertising

Search for flight

Information about flight

Registered Users

Continental Airlines, continental.com

53

Continental Airlines, continental.com

54

Search for flightCar or hotel

Printing Boarding Pass

Advertising

Flight Status

Different User Goals

Registered Users

Advertising

Northwest Airlines, nwa.com

55

Northwest Airlines, nwa.com

5656

Search for flight

Car or hotel

Registered Users

Advertising

Flight Status

News and Ads

Checkin

Existing Booking Services

Homework 2: Business goals

• Define business goals for your web site;• Find out three examples of similar web sites

and try to analyze their business goals;• Create couple of personas and scenarios for

them• Upload everything to Google Drive

57