Defining strategies from the value of website
1 like610 views
The document discusses strategies for website design including branding, usability, lead generation, and accessibility. It provides tips in each area and examples of how companies successfully implement them. Branding involves consistent colors, personality, emotions and value proposition. Usability focuses on clarity, learnability, credibility and relevancy. Lead generation utilizes content, graphics, A/B testing and targeting goals. Accessibility ensures responsiveness across devices and compliance with standards for disabilities. The overall message is that an effective website delivers value to customers while also generating value for the business.
Defining strategies from the value of website
- 1. By Chitpong Wuttanan Defining Strategies From The Value of Website Design
- 2. What your website delivering value to customers? ?
- 3. And, How can website return value to my corporate? ?
- 6. Worldwide Internet User (Penetration)
- 7. Worldwide Smartphone User Image By New Relic. Image By New Relic.
- 8. Thailand Internet and Smartphone Face
- 9. Global : Computer and Mobile share of time ahead of TV Image By InMobi
- 10. Global : Mobile device usage is throughout the day Image By InMobi
- 11. Thailand : Computer and Mobile share of time ahead of TV Image By InMobi- - -
- 12. Thailand : Mobile device usage is throughout the day Image By InMobi
- 13. Thailand : Mobile directly influencing decision making Image By InMobi
- 14. Now, Everything can do on Mobile Phone and Internet
- 15. What’s value of Website Design Branding ( ) Usability / Lead Generation ( ) Accessibility ( )
- 16. Branding ( )
- 17. Branding ( ) A corporate website should communicate the brand’s main value proposition. The logo, color scheme, and language should all be consistent with other marketing collateral.
- 18. Branding ( ) Apple is a great example of consistent branding that matches the philosophy of the company.
- 19. Branding : 5 Tips for brand building with web design 1.Color ( ) Color isn’t just aesthetics —it stimulates various emotions and carries with it subconscious associations to various things and characteristics. Positioning Magazine(
- 20. Branding : 5 Tips for brand building with web design 2.Character/Personality ( ) Infusing your brand with a little personality can help you define what it stands for. King Power Brand Character • Leading • Inspiring ( ) • Charming ( ) • Tempting ( )
- 21. Branding : 5 Tips for brand building with web design 3.Emotion ( ) It’s what feelings and emotions do you want people to experience when they visit your site? VDO Background
- 22. Branding : 5 Tips for brand building with web design 4.Size and position of the logo ( ) It’s what feelings and emotions do you want people to experience when they visit your site?
- 23. Branding : 5 Tips for brand building with web design 4.Size and position of the logo ( )
- 24. Branding : 5 Tips for brand building with web design 5.Value proposition ( ) Visitor take the first few seconds to orient themselves. Is this the right site? Does this look interesting? What is this all about? To answer these questions you should provide a clear and concise value proposition to your visitor. Facebook, Google,
- 25. Branding : 5 Tips for brand building with web design 5.Value proposition ( )
- 26. Usability ( )
- 27. Usability ( ) Usability is an assessment of how easy a website is to navigate and use. Usability is hugely important and needs to be kept in mind in website design Human
- 28. Usability ( ) (Human) Usability means user-centered design. Both the design and development process are focussed around the prospective user Heat map
- 29. Usability ( ) (Human) Usability and Heat Map can using http://Google.com/analytics
- 30. Usability : 5 Key Principles Of Good Website Usability 1.Availability and Accessibility ( ) Let’s start with a basic, yet central aspect of usability: the availability and accessibility of your site. • Server uptime ( ) • Broken links • Mobile responsiveness Amazon.com 1. Desktop Mobile 2. Amazon.com 2 Montools
- 31. Usability : 5 Key Principles Of Good Website Usability 2.Clearity ( ) Visitors come to your site with certain goals in mind. It is your job to help them reach these goals as quickly as possible. - Simplicity - Familiarity - Consistency - Guidance - Direct feedback - Good information architecture Apple.com
- 32. Usability : 5 Key Principles Of Good Website Usability 3.Learnability ( ) Key to intuitive design is to make use of what people already know, or create something new that is easy to learn. Microsoft.com Metro UI
- 33. Usability : 5 Key Principles Of Good Website Usability 4.Credibility ( ) Even if people find the content they are looking for, if they don’t trust you, that content is worthless. It is important that people know you are a real company with real people. Loreal.com
- 34. Usability : 5 Key Principles Of Good Website Usability 5.Relevancy ( ) It is not enough that your website is clear, your content must also be relevant. Again, it is essential that you know your users and why they visit your site. Nike.com
- 35. Lead Generation ( )
- 36. Lead Generation ( ) Is the generation of consumer interest or inquiry into products or services of a business , is an important function of any website, though it is commonly an after thought in the design process. / Marketing Phase System/Design and Sale Phase
- 37. Lead Generation ( ) Content is King! 1. Headlines to attract readers 2. Use Number 3. Repeat Keyword 4. Photo is a thousand words (or Infographic) 5. Benefit Other..
- 38. Lead Generation ( ) Information graphics or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly. Infographic Bloomberg
- 39. Lead Generation ( ) Information graphics for sharing information Infographic Starbucks
- 40. Lead Generation ( ) A/B Testing, Let's say that you want to test two different versions of something on your home page. Which is most likely to result in a customer making a purchase
- 41. Lead Generation ( ) A/B Testing Process
- 42. Lead Generation ( ) A/B Testing for Major potential for improvement OLD New 62.0% Improvement Goal of the Page: Visitor requests a test drive. How: Added SEO, conversion buttons, and larger pictures. revise topic
- 43. Lead Generation ( ) A/B Testing for Conversion rates directly impact revenue A/B Testing MALL.CZ
- 44. Lead Generation ( ) A/B Testing for Conversion rates directly impact revenue A/B Testing MALL.CZ 1
- 45. Lead Generation ( ) A/B Testing for Conversion rates directly impact revenue A/B Testing MALL.CZ 2
- 46. Lead Generation ( ) A/B Testing for Conversion rates directly impact revenue Variation 1 Variation 2 Variation 2 was the Winner It resulted in a straight 9.46% increase in sales 96% chance to beat original Zero spent on advertising
- 48. Accessibility ( ) Technology changes at a rapid pace, the biggest trend over the last few years is mobile computing. Today people access the Internet from a wide variety of devices: smart phones, computers, tablet
- 49. Accessibility ( ) Sample website design for all device
- 50. Accessibility ( ) Sample website design for all device
- 51. Accessibility ( ) Sample website design for all device
- 52. Is Your Website Turning Away Visitors on Mobile Devices?
- 53. Accessibility ( ) Responsive web design: Is a flexible, liquid layout that adapts to fit various screen sizes, resolutions and devices. It allows websites to automatically change layouts according to the visitor’s screen resolution. One Website, All Devices
- 54. Accessibility ( ) Responsive web design: Once loaded, re-size your browser window (drag the corners so it becomes larger or smaller) and you will notice the content adjusts itself accordingly.
- 55. Accessibility ( ) Mobile Application or Mobile Optimized Website (Responsive Web Design)?
- 56. Accessibility ( ) Mobile Application or Mobile Optimized Website (Responsive Web Design)? Responsive web design Pro: 1. Minimal resources required ( ) 2. Accessible to all Device 3. Cost effective 4. Seamless syncing with your website Con: 1. Limited functionality Function GPS, 2. Customer satisfaction ( ) Mobile Application Pro: 1. User experience ( GPS, ) 2. Compatibility ( Browser, ) 3. Loyalty ( ) 4. Off-line usage ( ) 5. Development resources ( ) Con: 1. Adoption and usage ( ) 2. Developing market ( ) 3. Ongoing costs for multi device ( ) 4. Loss of control ( cloud, app market)
- 57. Accessibility ( ) Robot or Search Engine Robot Usability are programs that traverse the Web automatically. It’s can make your website up to top rank on search engine such as Google.com, called is “Search Engine Optimization” SEO Search Engine
- 58. Accessibility ( ) Search Engine Optimization Process
- 59. Accessibility ( ) Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. Visual Impairments Auditory Impairments Mobility Impairments Cognitive Impairments
- 60. Accessibility ( ) Visual Impairments • Listening to text-to-speech synthesis of the content • Reading text using refreshable braille (small dots that are raised and lowered to display characters that are read by scanning over the raised dots using the fingertips) • Enlarging or reducing text size and images • Customizing settings for fonts, colors, and spacing • Listening to audio descriptions of video in multimedia
- 61. Accessibility ( ) Auditory Impairments • Transcripts and captions of audio content, including audio- only content and audio tracks in multimedia • Media players that display captions and provide options to adjust the text size and colors of captions • Options to stop, pause, or adjust the volume of audio content (independently of the system volume) • High-quality foreground audio that is clearly distinguishable from any background noise
- 62. Accessibility ( ) Mobility Impairments • Ergonomic or specially designed keyboard or mouse • Head pointer, mouth stick, and other aids to help typing • On-screen keyboard with trackball, joystick, and switches to operate it • Voice recognition, eye tracking, and other approaches for hands-free interaction
- 63. Accessibility ( ) Cognitive Impairments • Clearly structured content that facilitates overview and orientation • Consistent labeling of forms, buttons, and other content parts • Predictable link targets, functionality, and overall behavior • Different ways of navigating websites, such as through a hierarchical menu or search option • Options to suppress blinking, flickering, flashing, or otherwise distracting content • Simpler text that is supplemented by images, graphs, and other illustrations
- 64. Are you ready to Change? ?
- 65. Don't follow a trend. Follow your heart.
- 66. End Chitpong Wuttanan @ifew Chitpong Few WuttananChitpong@gmail.com Contact: Chitpong Wuttanan
- 67. Reference URL • http://advicemedia.com/what-value-of-web-design/ • http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/# • http://samyarn.com/2012/mobile-app-mobile-site-responsive-design/ • http://www.foraker.com/choosing-between-responsive-web-design-and-a-separate-mobile-site-to- improve-mobile-visitors%E2%80%99-experience/ • http://www.thaiwebaccessibility.com/ • http://www.stanford.edu/group/accessibility/cgi-bin/presentations/Intro_web_accessibility/ • http://visualwebsiteoptimizer.com/split-testing-blog/larger-product-images-increase-conversion-rate/ • http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/ • http://uxinth.blogspot.com/2012/08/ux-by-a-b-testing.html • http://adwordstool-how-to.blogspot.com/2012/10/9-headlines.html • http://seo-web.aun-thai.co.th/press/seo-blog-seo-usability • http://www.etda.or.th/etda_website/mains/display/1537 • http://www.pawoot.com/node/244/ • http://blog.crazyegg.com/2013/03/26/principles-website-usability/ • http://www.thaidesignwebsite.com/website-usability- %E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/ • http://www.24framework.com/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B 9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%9C%E0%B9%88%E0%B 8%B2%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B 9%81.html • http://www.visionefx.net/articles/deconstruct-rebuild-your-website.htm • http://searchengineland.com/4-areas-to-ab-test-for-e-commerce-websites-90559 • http://ecommerce.about.com/od/eCommerce-Basics/a/The-ABCs-Of-AB-Testing.htm • http://www.getelastic.com/best-practice-gone-bad-4-shocking-ab-tests/ • http://www.bigcommerce.com/ecommerce-blog/10-a-b-tests/