Week 10
Building a website requires far more than a designer - it takes a variety of skill sets...
- new business developer - account manager - project manager - business analyst - web analyst - producer - content strategist - web editor - web writer - user experience architect - information architect - SEO specialist - designer - usability specialist - production assistant - developer - programmer - server admin - technical assistant
user experience design
- info architecture - content (text, video, sound) - visual design - interaction design - human-computer interaction - sound design - human factors - industrial design - architecture start with why?: business goals & budgets answer who and what?: personas & content strategy determine how?: IA (info architecture), UX (user experience), wireframes, design, & Code
the problem(s)/ opportunity of our digital age...
- websites are too often developed by corporations, designers, and creatives without the input of users - "creative is king" - usage becomes the burden of users - this thinking is too narrow -"idea is king" - content becomes an afterthought - this thinking is too narrow
content strategy?
...filling in the LOREM IPSUMS and FPO's ...specific, well-informed recommendations about how we're going to get from where we are today (no content, or bad content, or too much content) to where we want to be (useful, usable content people will actually care about) "You have to have the content lead the design"
Step-by-Step Guide UX Design
1. Conduct research and discovery 2. Create the site's basic structure 3. Analyse content 4. Create a sitemap 5. Build the navigation 6. Create the layout 7. Assemble the other elements 8. Define the visual design 9. Conduct testing
Three Challenges for Website Development
1. Content 2. User (Personas) 3. User Experience (UX) What?, Who?, How?
six qualities that make up good UX:
1. Findability 2. Accessibility 3. Desirability 4. Usability 5. Credibility 6. Usefulness
(Open) API
Application Programming Interface, sets of technologies that enable websites to interact with each other by using SOAP, Javascript and other web technologies
rating rationale
Creativity (1-10) Content (1-10) Culture -Organization, Brand (1-10) Clients (1-10) Consistency -Message, Vision (1-10)
breadcrumbs
Links, usually on the top of the page, that indicate where a page is in the hierarchy of the website
8. Define the visual design
The first impression comes from the look of the website - these design principles are important for a UX practitioner to know: • Colour • Imagery
design theory
The fold: imaginary line at the bottom of the monitor that divides the immediately visible part of the website Consistency: use of visual elements is vital to your online presence across all properties and channels (such as your email newsletter, Facebook page and mobile site) White space: allows the eye to travel easily between chunks of information and allows scanning.
document object model (DOM)
a web standards approach to representing HTML and XML documents as objects
responsive website
a website that changes its layout depending on the device it is displayed on - it looks one way on a desktop computer, but then adapts to the smaller screen size and layout on a tablet or mobile phone. In this way, a single development project can cater for multiple device form factors
usability
the measure of a website's ability to accomplish goals of the user
server-side
transactions that take place on the server
open source
unlinke proprietary software, open software makes the source code available so that other developers can build applications for the software, or even improve on the software
From brochures that blink, towards
user solutions...
Search Engine Results Page (SERP)
what you see when you use a search engine
Hypertext Markup Language (HTML)
code that is used to write most websites
ground zero
first website developed tim berners-lee on august 6, 1991
navigation
how a web user moves through a website, and the elements that assist the user
it is essential to give users what they need...
reasons for choosing device for local business searches: mobile phone or tablet - need info on the go - its easy - can find info quickly - more opportunities to use this device - can find more complete info - its inexpensive - other - none of the above
website's visual identity
see page 6 of slideshow
who visits google & youtube
see page 6 of slideshow for gender, education, and browsing location graphs
pg 15 & 16 of slideshow ..
start with "who? From Audience and Users... to personas .. now, "how?" From "target insights" towards "user insights"... - useful - desirable - accessible - credible - findable - usable - valuable
got content?
start with what's inside: no content vs content overload
Widgets
Web tools (browser-based, desktop dashboard, and now mobile and TV-based) that bring partial website functionality to you without need to visit the url
W3C
World Wide Web Consortium oversees the web standards project
audience geography of google
(pg 5 of slideshow) - USA 30.1% of visitors (rank 1 in country) - india 8.6% of visitors (rank 2 in country) - china 5.0% of visitors (rank 10 in country) - japan 4.2% of visitors (rank 3 in country) - brazil 2.8% of visitors (rank 2 in country) - bounce rate: 26.10% (increased 15.00%) - daily page viewer per visitor: 14.71 (decreased 12.13%) - daily time on site: 14:24 (decreased 8.00%) - search visits: 1.80% (increased 31.00%) top keywords from search engines: 1. gmail (9.17% of search traffic) 2. google (4.40% of search traffic) 3. translate (2.26% of search traffic) 4. google translate (2.25% of search traffic) 5. google maps (1.96% of search traffic) what sites link to google.com: 1. youtube 2. vk.com 3. yandex.ru 4. doubleclick.net 5. yahoo.com total sites linking in: 4,032,025 what sites are related to google.com: 1. amazon 2. wikipedia.org 3. yahoo 4. youtube 5. yelp
upstream sites: which sites did people visit immediately before this site?
(pg 5 of slideshow) 1. youtube (5.0% of unique visits) 2. facebook (3.6% of unique visits) 3. amazon (1.4% of unique visits) 4. yahoo (1.1% of unique visits) 5. wikipedia.org (1.1% of unique visits)
Digital Marketing Ecosystem
*media type:* owned media *definition:* channel a brand controls *examples:* • Website • Mobile site • Blog • Twitter account *the role:* build for longer-term relationships with existing potential customers and earn media *benefits:* •Control • Cost efficiency • Longevity •Versatility • Niche audiences *challenges:* • No guarantees • Company communication not trusted •Takes time to scale *media type:* paid media *definition:* brand pays to leverage a channel *examples:* •Display ads • Paid search • Sponsorships *the role:* shift from foundation to a catalyst that feeds owned and creates earned media *benefits:* • In demand • Immediacy • Scale • Control *challenges:* • Clutter • Declining response rates • Poor credibility *media type:* earned media *definition:* when customers become the channel *examples:* • WOM • Buzz • "Viral" *the role:* Listen and respond — earned media is often the result of well- executed and well- coordinated owned and paid media *benefits:* • Most credible • Key role in most sales •Transparent and lives on *challenges:* • No control • Can be negative • Scale • Hard to measure see pg 23 on slideshow for - open forum eco-system picture - burgerking.com - online coupon platform - oldnavyweekly.com - online coupon platform
mobi site
*strengths:* - accessible from any web-enabled phone - generally the simplest, cheapest, and quickest option to develop - easy to use - can link to content within and outside of site and reap the SEO benefits *weaknesses:* - limited functionality - uses a separate code base from the full website
responsive site
*strengths:* - technically elegant and device "agnostic" solution - one consistent site accessible across many devices - one data set to work from - future-proof option that will work on most new devices *weaknesses:* - could be complex to develop - site needs a lowest common denominator approach to cater for all devices - may not work correctly on all sizes and shapes of devices - no agreed standard way yet to develop responsive sites
native app
*strengths:* - versatile and creative tools can be created - interactive and fun - can create real added value through innovative approaches not possible via a web browser - ideal for frequently repeated or routine tasks - promote brand loyalty - enables access to core phone functions: GPS, accelerometer, camera, etc - could generate income as a paid application - performance benefit in some cases *weaknesses:* - doesn't work on feature phones - different versions needed for different phone makes and models - entirely different and complex development process - users need to choose to download them - users without additional phone storage may not have enough space to install app - all apps must go through formal app stores and need to be approved in some instances - changes need to be released through version updates
shift happened
- Broadband access and speed - PC Penetration and ubiquity - Shockwave Flash ushers in animation and website "bling" - Web 2.0 democratizes design and distribution - Social adds the value of people - Prosumer Tools democratizes content production - phone cams, desktop editware for music and film, photoshop, etc - Accessible URL Domain - Registration to anybody with $20 and a dream
In summary: Website content demands you audit and articulate what people will get and why they'll care
- Content...got some? Let's audit it, organize it - Create or Curate? - Creation has implications on copywriting, producing - Curation has implications on maintenance, editing, legal clearances - Content Management System (CMS), a means for updating content dynamically - Findable? Get SEO-friendly throughout - Content strategy informs: -- messaging maps -- metadata framework -- SEO -- taxonomy -- technical copywriting -- folksonomy -- quality assurance -- licensing evaluations
Appendix: Moving beyond websites into ideas (you will not be tested on the following, unless its been covered in other sessions or is explicitly spelled out in the text book) ((pg 19 of slideshow))
- From hubs toward spokes.... - Website as Destination?
In Summary: Design = "a plan for action"
- Got Content? Content Development or Content Management - Ask, who are our users? - Personas - How do users use? - User Experience - Outline what are we giving our users? - Information Architecture - Consideration for how users will find their way - User Experience - Outputs for IA and UX - Sitemaps, Wireframes and User Flow Charts, CSS (Cascading Style Sheets) Now you can design and code
Earliest brand websites developed around the mental model of "electronic brochures." What we've since inherited:
- Limited functionality - Static HTML pages - Infrequently updated content - Expertly designed/developed by IT and coders - Expensively designed/developed - Frustratingly slow and hard to navigate >>>>>>>> - Function Overload - Animation Domination -"Content Gumbo" - Democratization of "expertise" and evolution of new specializations - Expensively designed/developed - Frustratingly slow (still) and hard to navigate
In Summary: Sites no longer the center of your user's world, or the sum of users' interactions with you
- Sites as one piece of the brand's digital mosaic - Fish where the fish are biting, site-like experiences where users are - Apps, widgets, give users just a little bit of the website - With such a vast www and social, consider many brand experiences to reach and meet users' needs
in summary: Early websites founded on logic of brochures...that language and mental model persists today
- Slow bandwidth demanded static sites - Simplistic constructs - GUI, graphical user interfaces - "Pages", "folds" and "breadcrumb" navigation - Training users about "urls" and driving "clicks" - Expensive and developed/designed by specialist coders - Increased bandwidth ushered in "flash" animation and experiential design features
In Summary: Website personas articulates who we are designing for and helps us prioritize feature sets and structure
- Who is our target user? -- No, really, what is her name and what are her primary goals for our site? Humanize her. - From thousands of users to a small set of manageable archetypes - Talk to these users, watch them use... - Personas get clients aligned on site objectives and settles design arguments - "what would our Personas want?"
In Summary: User Experience prioritizes website design decisions through the persona user's lens
- Win-Win: your business goals must align with user's abilities and expectations. Help them help you - Navigation: how will users expect to find their way - "Dogfooding" demands that you try your own site's features and determine, is this the best experience as my own user? - Test with real, live persona users. Recruit them. Talk to them. Watch them use. Evaluate their experience and feedback - Watch your metrics and analytics. Are users getting where they need to go? Bounce rates? User pathways? Track and react. - Fix. Optimize.
this thinking takes the whole picture into account
- content: answering what? - context: determining how? - users: answering who?
6. Create the layout
- header - left & right sidebar - central content - footer (rectangle shapes)
How to design a website...Design later. Code last. Start with Why, Who, What then How?
1. Outline Business Goals: Budgets, schedule out from launch calendar 2. Develop Personas: Who we're talking to (usage data, focus groups, 1-0n-1's) 3. Develop IA (Information Architecture): the structural design, and hierarchical organization and labeling of information and interrelated functions for websites 4. Optimize UX (User Experience): how we'll organize and optimize for the best user's journey 5. Develop and Test Wireframes: gut testing our organizational hierarchy 6. Design Prototypes: site creative "Looks and Feels" based on the facts and user needs 7. Outline Content Strategy: specific, well-informed recommendations about how we're going to get from where we are today (no content, or bad content, or too much content) to where we want to be (useful, usable content people will actually care about). 8. Content Development/Sourcing Plan: making the FPOs and Lorem Ipsos - copy, photos, videos, etc. 9. Metadata Frameworks: optimizing copy for SEO 10.Code 11.Launch Beta 12.Analytics Process how are we doing? 13.Governance and Maintenance: what are we going to do about it now and ongoing?
Step-by-step Guide to Building a Website
1. Planning and research 2. Choosing a domain name 3. UX and content strategy 4. Search engine visibility 5. Design 6. Development 7. Testing and launch
1, 2, 3 pyramid (pg 15 on slideshow)
1. news lead 2. key facts 3. least important details
Blogs
A blend of the term web log, is an online diary website with regular entries of commentary, descriptions of events, or other material such as graphics or video. The ability of readers to leave comments in an interactive format is an important part of many blog
robots exclusion protocol
A protocol used to indicate to search engine robots which pages should not be indexed
4. Create a sitemap
A sitemap is the visualised structural plan for how the website's pages will be laid out and organised
Extensible Markup Language (XML)
A standard used for creating structured documents
good UX is...
A standard website needs to be reliable, functional and convenient ...but a great website needs to be enjoyable to use, and an experience worth sharing
content management system (CMS)
A system that is used for updating content of a website
flash
A technology used to show video and animation. can be bandwidth heavy and unfriendly to search engine spiders
Universal Resource Locator (URL)
A web address that is unique to every page on the Internet
7. Assemble the other elements
Adding in the extra elements that your website will need: • Calls to action • Forms • Search
above the fold
All the content that can be seen on a screen without scrolling down
nofollow link
An attribute of a hyperlink, indicating that the link is not necessarily endorsed by the website
Doing it right: The Boston Globe
BostonGlobe.com invests in a responsive design website to enable readers to enjoy their site via various devices
1. Conduct research and discovery
Conducting detailed research on the business, the users, and the technology involved Doing this lets UX practitioners know exactly what they need to do to address the needs of the business and audience This will generate a lot of data that needs to be filtered and organised
2. Create the site's basic structure
Information architecture (IA) is about managing information: • Put information into logical, clear and familiar structures • Crucial to usability • Categories and pages should flow from broad to narrow • An intuitively designed structure will guide the user to the site's goals
meta data
Information that can be entered about a web page and the elements on it to provide context and relevant information to search engines; used to be an important ranking factor
all tag
Information that is displayed if an image cannot be displayed; used by search engines to determine what an image is
common page elements
Items which appear on every page of a website
universal mobile UX principles
Keep these principles in when designing a mobile website, an app or a nifty responsive site • Simplify • Reduce loading time • Encourage exploration • Give feedback • Communicate consistently • Predict what your user wants
sitemap
On a website, a page that links to every other page in the website, and displays these links organized according to the information hierarchy (In UX terminology, this is the visualized structural plan for how the website's pages will be laid out and organized)
5. Build the navigation
Successful navigation should help a user to answer four basic questions: a) Where am I? b) How did I get here? c) Where can I go next? d) How do I get home?
accessibility
The degree to which a website is available to users with physical challenges or technical limitations
dynamic parameter
The elements of a URL that are dynamically generated
information architecture
The layout and structure of a Web site, which should be according to information hierarchy and categories
3. Analyse content
The points that UX needs to address are: • What the site should achieve • What the user wants and needs • What makes the content unique, valuable or different • The tone and language used
client-side
Transactions that take place before information is sent to the server
cascading style sheets (CSS)
an approach to web design that aims for lightweight code and standards compliant websites
Color and consumer
color is one of the most powerful methods of design - not entirely universal colors that entice in North America are different from those that entice India *yellow* - optimistic - youthful - often used to grab attention of window shoppers *red* - energy - increases heart rate - creates urgency - often seen in clearance sales *blue* - creates the sensation of trust and security - often seen with banks and businesses *green* - associated with wealth - easiest color for the eyes to process - used in stores to relax *orange* - aggressive - creates a call to action - subscribe, buy, or sell *pink* - romantic - feminine - used to market products to women and young girls *black* - powerful - sleek - used to market luxury products *purple* - used to soothe - calm - often seen in beauty or anti-aging products
9. Conduct testing
create new version > test > analyze results > identify improvements
HTML5
latest evolution of hypertext markup language, and is an update of HTML4 which was published in 1998. Allows for rich media content and interaction on the scale of adobe flash, but unlike its counterpart doesn't require additional third party plugins
mobile websites
make it possible for users to access information about your brand on the move wherever they may be, as long as their phone has a browser and an Internet connection
web development and design
• How the web development process works, from planning through to design and launch • Development and design best practices and the principles of designing for persuasion • How to assess the quality and effectiveness of web development and design implemented by suppliers or agencies • How to evaluate the need for either a static or CMS website • Content Management System (CMS) - A system that allows an administrator to update the content of a website, so that a developer is not required to do so • Cascading Style Sheets (CSS) - A programming language that defines the styles (fonts, colors, etc.) used to display text and content. Web pages are one of the places that this language is used • Bla Search engine results page (SERP) - The actual results returned to the user based on their - search query
