Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Website Design and Structure
© Professor Seema Gupta
Seema Gupta
Professor at IIMB
Blog: www.digitalmediatadka.com
Faceboo...
Contents
Introduction
Design
Interaction
OVP(Online Value Proposition)
Customer Orientation
Personalization
ORM(Online Ret...
Introduction
© Professor Seema Gupta
Website as Real Estate property
© Professor Seema Gupta
Website goals 5S’S
• Sell
• Serve
• Speak
• Save
• Sizzle
© Professor Seema Gupta
Robert Cialdini’s weapons of influence
Visual Design
Web analytics
Legal requirements
Digital marketing, Planning and Impr...
© Professor Seema Gupta
Design
Importance of a good web design
Converts traffic to
business.
Builds connections.
Keeps the user connected.
Provides a ple...
Page design
It is common to have different page templates
For the key pages like home page, service page,
Blog page, etc.
...
Integrated design
• Integration of web and data base, remembers
the customer’s name, preferences and
behaviors.
• Personal...
© Professor Seema Gupta
Key Steps: PDDTD
Planning
Design
Development
Testing
Deployment
© Professor Seema Gupta
To Be SAFE follow SEF
Simple
Elegant
Functional
Often a simple elegant and a functional
design works out.
© Professor Seem...
Ease of use
Ease of use = S+N+I+P
Structure
Navigation
Interaction
Page layout
© Professor Seema Gupta
Domain names
Catchy and easy to remember.
Buy multiple domain names like .com, .net, .in
and redirect the user to the orig...
Arranging Information
© Professor Seema Gupta
Home page
• It is a central reference point.
• It could be used to highlight special offers,
news etc.
• Example: http://w...
Writing effective web content
Use the inverted pyramid style of writing
Know your audience
Make it scan able
Make it origi...
Freshness of content
© Professor Seema Gupta
You can see how mtv maintains freshness of site by
uploading “Our Fave videos...
© Professor Seema Gupta
Source: www.mp09digital.com
Aesthetics
© Professor Seema Gupta
Aesthetics
It’s the personality of the website
© Professor Seema Gupta
Aesthetics=LTGCS
Layout
Typography
Graphics
Color
Style
© Professor Seema Gupta
4 second rule
Research from Akamai shows that content needs
to download rapidly, otherwise site experience
suffers and vis...
© Professor Seema Gupta
Interaction
© Professor Seema Gupta
Interaction
Source: FedEx website
© Professor Seema Gupta
Interaction through animation
Source: www.nike.com
© Professor Seema Gupta
Interaction through case studies
Source: www.accenture.com
© Professor Seema Gupta
Interactive product adviser
Call back facility
Chat facility
Onsite search engine
Email a friend f...
Mistakes in web design
• Using pdf files
• Same color for every
Link
• Non scan able text
• Anything that looks like
an ad...
Online Value Proposition(OVP)
© Professor Seema Gupta
Online Value Proposition(OVP)
© Professor Seema Gupta
© Professor Seema Gupta
You could read on every page it says – genuine products,
secure payments and easy returns
Source: ...
Customer Orientation
© Professor Seema Gupta
Rosenfeld and Morville suggest 4 stages
help achieve customer orientation
• Identify Audiences
• Rank importance of each t...
Customer Orientation
It is about trying to provide content that
appeals to various users.
3% of the visitors are buyers ar...
You could see there is a worldwide change option..which
gives different content for different users
Source:www.cisco.com
© Professor Seema Gupta
You could there is a different login for premier
users
Source: www.dell.co.in
Personalization
© Professor Seema Gupta
Personalization
© Professor Seema Gupta
You could see that you can design your own t-shirt in the alma
mater website which...
Personalization
© Professor Seema Gupta
If you have seen videos of some person then youtube
recommends you to subscribe to...
© Professor Seema Gupta
The most important sound to any one is your own name. So,
there is your name everywhere…as you log...
Personalization can be based on
• Customer
• Country
• Customer preferences
• Results searches
© Professor Seema Gupta
Online retail merchandise
© Professor Seema Gupta
Online retail merchandise
It aims at maximizing the sales potential for each
store visitor.
Presenting relevant products a...
1)Faceted search
© Professor Seema Gupta
Source: www.Epicurious.com
full-fledged faceted navigation on allows users to nar...
2)Featuring best selling products
prominently
You could set the snip from flipkart taken in the midst of summer showcasing...
3)Use of bundling
© Professor Seema Gupta
Source: www.mcdonalds.com
4)Use of customer ratings and reviews
© Professor Seema Gupta
Source: www.flipkart.com
5)Use of product visualization systems
© Professor Seema GuptaSource: www.myntra.com
© Professor Seema Gupta
New Trends
Less text
© Professor Seema Gupta
Video/movingbackgrounds(Click hyperlink to view video)
© Professor Seema Gupta
Richer content experiences
© Professor Seema Gupta
Source: www.harley-davidson.com
Hypercolour
© Professor Seema Gupta
Cards / tiles
© Professor Seema Gupta
Monochromatic design
© Professor Seema Gupta
© Professor Seema Gupta
Third-Party Services
© Professor Seema GuptaSource: www.jabong.com
© Professor Seema Gupta
Thank you
Read more articles at
www.digitalmediatadka.com
Prochain SlideShare
Chargement dans…5
×

Web design and structure with new trends in web design and ways to make your website more engaging

1 892 vues

Publié le

Read on to get idea of a good web design and its contents. It has good self explanatory images.

Publié dans : Formation, Technologie, Business

Web design and structure with new trends in web design and ways to make your website more engaging

  1. 1. Website Design and Structure © Professor Seema Gupta Seema Gupta Professor at IIMB Blog: www.digitalmediatadka.com Facebook: https://www.facebook.com/digitalmarketingtadka Follow on twitter @seemaiimb
  2. 2. Contents Introduction Design Interaction OVP(Online Value Proposition) Customer Orientation Personalization ORM(Online Retail Merchandise) New Trends © Professor Seema Gupta
  3. 3. Introduction © Professor Seema Gupta
  4. 4. Website as Real Estate property © Professor Seema Gupta
  5. 5. Website goals 5S’S • Sell • Serve • Speak • Save • Sizzle © Professor Seema Gupta
  6. 6. Robert Cialdini’s weapons of influence Visual Design Web analytics Legal requirements Digital marketing, Planning and Improvement © Professor Seema Gupta
  7. 7. © Professor Seema Gupta Design
  8. 8. Importance of a good web design Converts traffic to business. Builds connections. Keeps the user connected. Provides a pleasant experience to the user. © Professor Seema Gupta
  9. 9. Page design It is common to have different page templates For the key pages like home page, service page, Blog page, etc. Users spend most of the time on old conventional websites, so they expect they might expect newer sites to be similar. © Professor Seema Gupta
  10. 10. Integrated design • Integration of web and data base, remembers the customer’s name, preferences and behaviors. • Personalizes the experience © Professor Seema Gupta
  11. 11. © Professor Seema Gupta
  12. 12. Key Steps: PDDTD Planning Design Development Testing Deployment © Professor Seema Gupta
  13. 13. To Be SAFE follow SEF Simple Elegant Functional Often a simple elegant and a functional design works out. © Professor Seema Gupta Usability And Accessibility
  14. 14. Ease of use Ease of use = S+N+I+P Structure Navigation Interaction Page layout © Professor Seema Gupta
  15. 15. Domain names Catchy and easy to remember. Buy multiple domain names like .com, .net, .in and redirect the user to the original site. © Professor Seema Gupta
  16. 16. Arranging Information © Professor Seema Gupta
  17. 17. Home page • It is a central reference point. • It could be used to highlight special offers, news etc. • Example: http://www.whitehouse.gov © Professor Seema Gupta
  18. 18. Writing effective web content Use the inverted pyramid style of writing Know your audience Make it scan able Make it original © Professor Seema Gupta
  19. 19. Freshness of content © Professor Seema Gupta You can see how mtv maintains freshness of site by uploading “Our Fave videos” Source: www.mtv.com
  20. 20. © Professor Seema Gupta Source: www.mp09digital.com
  21. 21. Aesthetics © Professor Seema Gupta
  22. 22. Aesthetics It’s the personality of the website © Professor Seema Gupta
  23. 23. Aesthetics=LTGCS Layout Typography Graphics Color Style © Professor Seema Gupta
  24. 24. 4 second rule Research from Akamai shows that content needs to download rapidly, otherwise site experience suffers and visitors will leave the site © Professor Seema Gupta
  25. 25. © Professor Seema Gupta Interaction
  26. 26. © Professor Seema Gupta Interaction Source: FedEx website
  27. 27. © Professor Seema Gupta Interaction through animation Source: www.nike.com
  28. 28. © Professor Seema Gupta Interaction through case studies Source: www.accenture.com
  29. 29. © Professor Seema Gupta Interactive product adviser Call back facility Chat facility Onsite search engine Email a friend facility Other types of interaction
  30. 30. Mistakes in web design • Using pdf files • Same color for every Link • Non scan able text • Anything that looks like an advertisement • Opening new windows © Professor Seema Gupta
  31. 31. Online Value Proposition(OVP) © Professor Seema Gupta
  32. 32. Online Value Proposition(OVP) © Professor Seema Gupta
  33. 33. © Professor Seema Gupta You could read on every page it says – genuine products, secure payments and easy returns Source: www.amazon.in
  34. 34. Customer Orientation © Professor Seema Gupta
  35. 35. Rosenfeld and Morville suggest 4 stages help achieve customer orientation • Identify Audiences • Rank importance of each to the business • List the 3 important information needs of each • Ask representatives of each audience to develop their own wish list © Professor Seema Gupta
  36. 36. Customer Orientation It is about trying to provide content that appeals to various users. 3% of the visitors are buyers are buyers and remaining are potential buyers and disqualified traffic Convert the others into buyers. © Professor Seema Gupta
  37. 37. You could see there is a worldwide change option..which gives different content for different users Source:www.cisco.com
  38. 38. © Professor Seema Gupta You could there is a different login for premier users Source: www.dell.co.in
  39. 39. Personalization © Professor Seema Gupta
  40. 40. Personalization © Professor Seema Gupta You could see that you can design your own t-shirt in the alma mater website which has served 3,30,000 customers Source: www.almamaterstore.in
  41. 41. Personalization © Professor Seema Gupta If you have seen videos of some person then youtube recommends you to subscribe to them
  42. 42. © Professor Seema Gupta The most important sound to any one is your own name. So, there is your name everywhere…as you login through facebook Source: www.amazon.in
  43. 43. Personalization can be based on • Customer • Country • Customer preferences • Results searches © Professor Seema Gupta
  44. 44. Online retail merchandise © Professor Seema Gupta
  45. 45. Online retail merchandise It aims at maximizing the sales potential for each store visitor. Presenting relevant products and promotions to site visitors which help in conversion rate and average order value Some common approaches are listed next© Professor Seema Gupta
  46. 46. 1)Faceted search © Professor Seema Gupta Source: www.Epicurious.com full-fledged faceted navigation on allows users to narrow results by several different dimensions
  47. 47. 2)Featuring best selling products prominently You could set the snip from flipkart taken in the midst of summer showcasing an ac with a free stabilizer. © Professor Seema Gupta Source: www.flipkart.com
  48. 48. 3)Use of bundling © Professor Seema Gupta Source: www.mcdonalds.com
  49. 49. 4)Use of customer ratings and reviews © Professor Seema Gupta Source: www.flipkart.com
  50. 50. 5)Use of product visualization systems © Professor Seema GuptaSource: www.myntra.com
  51. 51. © Professor Seema Gupta New Trends
  52. 52. Less text © Professor Seema Gupta
  53. 53. Video/movingbackgrounds(Click hyperlink to view video) © Professor Seema Gupta
  54. 54. Richer content experiences © Professor Seema Gupta Source: www.harley-davidson.com
  55. 55. Hypercolour © Professor Seema Gupta
  56. 56. Cards / tiles © Professor Seema Gupta
  57. 57. Monochromatic design © Professor Seema Gupta
  58. 58. © Professor Seema Gupta Third-Party Services
  59. 59. © Professor Seema GuptaSource: www.jabong.com
  60. 60. © Professor Seema Gupta Thank you Read more articles at www.digitalmediatadka.com

×