KHALED HAMID

1
WEB DESIGN

• Presented by
• KHALED HAMID
• Assistant ProfessorDepartment of Fashion Design
  and Merchandising
• School of Arts
• Virginia Commonwealth Universitymhamid_at_vcu.edu

2
Good News / Bad News

• The good news is that anyone can create a Web
  page or Web site.
• The bad news is that anyone can create a Web page
  or Web site.

3
What can a web site DO ?

• Reach new markets and customers
• Keep customers informed about new procedures,
  products, articles, issues, or events.
• On-line registration forms
• Save money on printing and postage
• Provide better, faster, customer support
• Save time money on phone support
• Support collateral marketing initiatives

4

• THINK BACKWARDS

5
Planning

• What are your Goals?Why do you need a web site?
• Selling more stuff, right then and there.
• Generating leads, so salespeople can close the
  deal.
• Stirring interest in a product or service.
• Informing or persuading the public.

Who is your Audience? (demographics, behavior,
usage patterns) What features will you need on
the site? How will you measure ROI?
6

• How could the website SUPPORT your business
  (e.g. create more traffic) ?

7

• Federal Express is one of the first company's to
  leverage the internet to support its core
  business. It created a "Killer App", the online
  package tracking service

8
The Digital Resort
9
Online vs. On Location
10
Web Content
content is king!
11
1 Reason for surfing the internet

• INFORMATION

12
Rules for Creating Effective Websites

• design

13
REMEMBER

• People make a decision to stay or go in the first
  
• 3 seconds

14
Its all about Usability

• The web is such a quick user controlled media.
• Leaving a web site is as easy as a click..
• You can have lose many visitors without ever
  knowing it

15
Get Over Yourself !!

• YOU are NOT the USER
• Visualize your users - no generic people
• Not all users are equal - design for top three

16
Web Usability

• 1) Dont make me think
• 2) Users dont read pages - they scan
• 3) Users dont figure out how things workthey
  muddle through
• 4) Omit needless words
• 5) Nothing beats a good tagline
• 6) Make it obvious whats clickable
• 7) Break up pages into clearly defined areas

17
Six Web Design Tips

• Navigation
• Layout
• Load time
• Browser/screen resolution compatibility
• Color
• Site design

18
Web Design Tips

• Navigation
• Concise, quick and easy for your users
• Structure should be uniform throughout your
  web-site
• Keep users informed about which part of your site
  they
• are in and how to move on to other parts of your
  site
• Layout
• Consistency
• Never cram your page with too much information
• Keep scrolling to a minimum

19
Navigation Saturns Old Page
20
Navigation Saturns New Page
21
Example -Unclear Layout
22
Example- Clear Layout
23
Web Design Tips continued

• Load time is very important
• The longer it takes for your site to load the
  quicker the visitor will leave
• Design with a user of a 56k modem in mind
• Recommended file size 40-60K
• Save all photos as .jpg and all normal graphics
  as .gif
• Browser / screen resolution compatibility
• Make your site friendly to all browsers and all
  screen resolutions

24
The Dysfunctional Site
Dont break navigation with pop-ups or other
techniques.
How much of the page dedicated to information?
Is navigation simple and intuitive?
Is navigation simple and intuitive?
25
(No Transcript)
26
Web Design Tips continued

• Color
• Business sites use light colors such as Blue,
  Grey, White etc.
• 3-5 colors per page
• Complementary colors
• Site design
• Building vs. designing a web-site

27
Why We Need Principles

• Bad web design isnt creative, its really
  ANNOYING!

28
Lets have a closer look
29
(No Transcript)
30

• What site is this?
• Logo in top-left corner denotes the site
• Another logo at top-right to reinforce

31

• What kind of site is this?
• Shopping cart icon
• Tab row content
• Categories on left
• Prices in content area

32

• What can I do here?
• Welcome for new visitors
• Tab row / Search on top
• Categories
• Prices
• All links are clear

33

• Above the Fold
• Most important info visible without scrolling

34
(No Transcript)
35

• What site am I at?
• Logo in upper-left reinforces brand, can click to
  go to home
• Same font, layout, color scheme also
  reinforces(i.e. CONSISTENCY)

36

• Where am I in the site?
• Home gt Music are location breadcrumbs
• Tab row says Music
• Album cover, Product Highlights, and CD cover

37

• What can I do?
• See more info about this album
• Buy! Buy! Buy!
• See more info about specific CDs

38

• Can I trust these sellers?
• Who am I buying from?
• Are they reputable?
• What about shipping?

39

• The Fold
• Hmm, whats below here?

40

• Impulse buy
• Recommended products
• About this album
• Lots of unused whitespace
• Still more info below

41

• Is this product any good?
• Editorial reviews
• Customer reviews
• Some important info below the fold here
• Nothing critical though

42
(No Transcript)
43

• What site am I at?
• Logo in upper-left
• Colors, layout, font

44

• Where am I in the site?
• Last link clicked was Buy!
• Shopping Cart and Proceed to Checkout
  reinforce that this is the right page

45

• Cross-selling
• Possibly a pleasant surprise
• Impulse buy

46

• What am I going to buy?
• Easy to remove
• Easy to move to wishlist
• How much will it cost?
• Shipping costs there, no nasty surprises

47

• What can I do?
• Proceed to Checkout action button
• Visually distinct
• 3D, looks clickable
• Repeated above and below the fold

48
(No Transcript)
49

• What if I dont have a User ID?
• What if I forgot my password?

50

• Error message
• Small, hard to see
• Too far away from where people will be looking
• Page looks too similar to last page (did anything
  happen?)

51
(No Transcript)
52

• What site?
• Logo, layout, color, fonts
• Where in site?
• Checkout, step 1 of 3
• Choose shipping address

53

• Note whats different
• No tab rows
• No impulse buys
• Only navigation on page takes you to next step
• Extraneous info and links removed to focus users

54
Quick-Flow Checkouts
55
Quick-Flow Checkouts

• Last step of process
• Step 3, Place Order
• Place my order button
• Two buttons for fold

56
Quick-Flow Checkouts

• No nasty surprises
• Can see order
• Total price is same as shopping cart

57
Quick-Flow Checkouts

• Easy to change shipping and billing
• Easy to save this info
• Easier to setup info in context of specific task
  instead of setup first
• Clearer to users why this info is needed in former

58
Keys to Profiting in E-business
Affluent shoppers expect a different luxury
experience online. Rather than being dazzled by
its entertainment value, they expect convenience,
confidence and control.
59

• Key 1 E-commerce
• Visitors should be able to purchases with the
  click of a button
• Cater to the impulse buyer
• Provide a simple yet effective shopping cart
  system
• To allow customers to ask questions by e-mail,
  provide on-line customer service forms or a
  customer service e-mail address

60
Key 1 continued E-commerce

• Check mailbox frequently in order to respond to
  customer queries promptly
• As an alternative to using e-mail, list your
  phone numbers on your web-siteInclude hours of
  operation
• Clarify security measures
• Updateupdateupdate

61

• Key 2 Form Affiliations
• Form solid partnerships and affiliations
• Develop joint venture partnerships with those web
  sites that fit with the "theme" of your
  e-business

62

• Key 3 Technological Knowledge
• You don't have to be a programmer, but you must
  have access to those people who are
• Key 4 Promote
• Advertise
• Key 5 Patience
• Think long-term
• Create step-by-step and you'll be greatly
  rewarded
• Key 6 Investment
• Invest both time and money

63
Making Your Site More Useful

• Offer unparalleled convenience
• Make it a snap to locate and use your Web site
• Submit your site to search engines
• Assist with decision-making
• Provide organized, easy way to make purchase
  decision
• For example checklist or worksheet

64
Making Your Site More Useful

• Invite participation
• Provide forums, share advice, publish articles,
  etc.
• Sites that provide valuable communities for
  customers gain greater customer loyalty
• Give something for nothing
• People respond to getting good stuff free

65
FEEDBACK

• Ask for your visitors e-mail addresses?
• Ask them to sign your guest book
• Ask them to subscribe to your newsletter
• Request information from your auto-responder

66
FINAL WORD

• Most of the real world is offline and it is were
  people still get their information. So use the
  offline world to inform the business cards,
  signs, flyers brochures yellow pages ads packages
  gifts certificates and on your stationary

67

• THANK YOU