DBC P-0 Week 2
<p></p>
The p element represents a paragraph.
<!doctype html> *must have*
Tells the computer that it's looking at an HTML page. Put this at the top of your HTML document.
<meta charset="utf-8"> *must have*
Tells the computer that you are using the UTF-8 character set (which is the character set for most of the world wide web). Guards against your site turning into gibberish.
What Situations Would Benefit From UX Design?
-COMPLEX SYSTEMS -START-UPS -PROJECTS WITH "OK" BUDGETS (small companies) -PROJECTS WITH LONGER TIMEFRAMES LINK
Tasks And Techniques Of UX Designers
-EVALUATION OF CURRENT SYSTEM LINK -A/B TESTING -USER SURVEYS -WIREFRAMES AND PROTOTYPES -USER FLOWS -STORYTELLING -DESIGN PATTERNS -USER PROFILES AND PERSONAS -CONTENT INVENTORY -CONTENT STYLE GUIDES
Benefits of a wireframe
-Test and refine navigation -See how content lays out on the page -Study and rapidly refine the user interface design of web forms and interactive elements -Evaluate overall effectiveness of the page layout against usability best practices -Determine web development/programming requirements
Things To Know About UX Design
-UX DESIGN IS NOT ONE SIZE FITS ALL LINK -CAN'T BE DIRECTLY ASSESSED WITH TRADITIONAL METRICS -NOT THE SAME THING AS USABILITY
Websites About UX
-UX Magazine -UX Booth -User Interface: Stack Exchange -Stack Overflow -UX Exchange -User Interface Engineering -UXmatters -52 Weeks of UX -Boxes and Arrows -Semantics -UsabilityPost -101 Things I Learned in Interaction Design School -UX Quotes -Quotes From the User -everydayUX -Konigi -90 percent of everything -DarkPatterns.org
Tools Of The Trade (UX)
-WIREFRAMING AND PROTOTYPING APPLICATIONS -A/B TESTING SOFTWARE -CONTENT INVENTORY SOFTWARE -USER TESTING AND FEEDBACK SOFTWARE -ANALYTICS SOFTWARE
Criticisms Of UX As A Profession
-YET ANOTHER THING TO WORRY ABOUT -TOO FAR REMOVED FROM THE PROCESS -ADDS EXPENSE -RESULTS ARE NOT DIRECTLY MEASURABLE LINK
UCD Process (Updated)
1) Collect information about the problem -meet with client and identify the product's requirements using a standardized product requirement document and user's stories -benchmarking and trend analysis 2) Prepare to design with paper prototyping 3) Design wireframe and web prototyping 4) Approval - use research documents and deliverables to help with persuasion. Include a good story about the design process. Many designers switching to guerilla research methods over iterative research which is more timely and costly *Consider recurring problems - >spreading an understanding of the design process >communication within the team >demonstrating the process to get a buy in
User Centered Design (UCD) Process - Classic
1) Define the problem 2) Define the scope of the project 3) Iterate through paper prototyping and wireframing 4) Push code to production 5) Use multivariate split-testing and detailed Google Analytics event tracking 6) Post launch - measure & plan optimization
Wireframe Process
1) Get Inspiration from other sites 2) Design your process -sketch>wireframe>visual>code 3) Pick your mock up tools 4) Set up a grid 5) Determine layout with boxes 6) Define information hierarchy with typography 7) Fine tune with gray scale 8) High Definition wireframe 9) Translate the wireframe to visual representation
Steps for Problem Solving
1. Identify or understand your problem. 2. Devise a plan to rectify it. 3. Implement your solution. 4. Review whether it was successful. (If it wasn't, then you missed something in the previous steps!)
6 Phases of the Web Site Design and Development Process
1. Information Gathering 2. Planning 3. Design 4. Development 5. Testing and Delivery 6. Maintenance
Why is my site slow on mobile?
A cellular device has to establish a radio channel before it can send and get data. average round trip >300ms
A/B TESTING SOFTWARE
A/B testing (also known as split testing or multivariate testing) compares different versions of a page, and it can be conducted with any of several programs. Basically, A/B testing software splits a website's traffic into two equal segments. One group sees version A, and the other group sees version B. Statistics such as conversion rate and bounce rate are tracked for each version. Split testing determines which version is better based on these statistics. One of the most popular applications for A/B testing is Google's Website Optimizer.
<a href="http://www.example.com'>...</a>
Adds links to external sites via the href attribute.
Wireframing
Allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. Like an architectural blueprint.
<img src="http://www.example.com/image/image.jpg" alt="My image"/> *self closing*
An img element represents an image. The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element's fallback content. The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. The img element must not be used as a layout tool. In particular, img elements should not be used to display transparent images, as they rarely convey meaning and rarely add anything useful to the document.
Information Gathering (Web Design)
Certain things to consider are: 1. Purpose What is the purpose of the site? Do you want to provide information, promote a service, sell a product... ? 2. Goals What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information. 3. Target Audience Is there a specific group of people that will help you reach your goals? It is helpful to picture the "ideal" person you want to visit your web site. Consider their age, sex or interests - this will later help determine the best design style for your site. 4. Content What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering...?
<thead></thead>
Denoted the table head, where you put your columns names.
<html></html> *must have*
Denotes the HTML portion of the document.
<body></body> *must have*
Denotes the body of your document. Everything inside these tags is visible to the user.
<head></head> *must have*
Denotes the head area of your site where the meta tags go. None of this content is visible to the user.
<tbody></tbody>
Denotes the table body, where all the tabular data goes.
Who coined the term "user experience"?
Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).
<li></li>
Each list item goes inside of an li tag.
<title></title> *must have*
Gives your site a title in the top of the browser bar.
GIF
Graphics Interchange Format were introduced by Compuserve in 1987 and enhanced with animation in 1989. Best for animations that can't be replaced with CSS. Contain up to 256 colors per frame. Are lossless - use dithering to give the appearance of a smoother blend. Their compression algorithm removes horizontal redundancy. The more the more details or noise, the larger the file. For better performance - replace GIF animation with CSS, replace non animated GIFs with PNG-8s, replace movie GIFs with asynchronysly-loading videos.
headlines <h1></h1> through <h6></h6>
H1-H6 Represent headings and subheadings. These elements rank in importance according to the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
HTML describes a page semantically
HTML elements have meaning associated with them, and their placement and structure within the page further leverages this meaning.
Block vs. Inline Elements
HTML tags fall into two categories: block or inline. By default block elements fill the entire width of the page. Inline elements , on the other hand, only take a little bit of room and will sit next to one another. Inline elements should always go inside of block elements. Block elements should not go inside or next to inline elements. You can assume that ever tag is a block element unless it says otherwise.
HTML History
HTML was intended for text documents, created in 1990 by Tim Berners-Lee who also invented the WWW. The original implementation only contained 18 tags w/o media and limited styling capabilities.
Jpeg
Joint Photographic Experts Group started in 1986 and standardized in 1992. Best for: Photos, images with many colors. JPEGs are lossy - their algorithm is based loosely on how humans see and process information. Good at: Smooth gradients, low contrast. Bad at: High contrast areas, and edges. Optimization options - Reduce noise, decrease export quality, blur unimportant areas.
<script src="http://www.example.com/scripts/myjavascript.js"></script>
Links to external JavaScript files via the src attribute.
<link rel="stylesheet" href="http://www.example.com/css/style.css">
Links to external stylesheets via the href attribute. Use the rel attribute to tell the computer that this is a stylesheet.
Regular tags vs self-closing
Most HTML, tags have a beginning (<p>) and end (</p>) tag. Some tags close themselves (<img/>).
PNG-24
No restriction on color palette and handles transparency differently. Optimization options - decrease noise, decrease number of colors.
<ol></ol>
Ordered list, good for numbered or alphabetic lists.
PNG
Portable Network Graphics were created as an improved, non patented replacement for GIF in 1996. Best for images with few colors. Lossless with 256 color palette, dither compatible, and they recognize horizontal and vertical patterns.
<td></td>
Put each piece of data inside of a data cell, inside of your table row, inside of your table body.
<section></section>
Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.
<aside></aside>
Represents a section of a page consisting of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
<article></article>
Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.
<nav></nav>
Represents navigation for a document. The nav element is a section containing links to other documents or to parts within the current document. Not all groups of links on a page need to be in a nav element — only groups of primary navigation links. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases.
<footer></footer>
Represents the "footer" of a document or section of a document. The footer element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc. Contact information for the section given in a footer should be marked up using the address element.
<header></header>
Represents the "header" of a document or section of a document. The header element is typically used to group a set of h1-h6 elements to mark up a page's title with its subtitle or tagline. header elements may, however, contain more than just the section's headings and subheadings — e.g., version history information or publication date.
<address></address>
Represents the contact information for its enclosing section. If it is a child of the body element, then it applies to the document as a whole.
SVG
Scalable Vector Graphics is an XML-based vector image format born out of competing standards submitted to W3C. Became a W3C recommendation in 2001. Scaled for Retina, if inline it eliminates an HTTPS request. Not supported <= IE8. Exports with a lot of cruft. Inlined SVG removed cacheability and makes your HTML file size larger, so test it.
HTML Structure
Set up like a tree structure with nested branches encapsulated in top tag. "Tree of nested nodes(tags)"
Attributes
Some tags have attributes that you have to use. Ex: <a> tags needs links in their href attributes.
<span></span>
Span tags allow you to group inline elements.
Design
Target audience is one of the key factors taken into consideration. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site. Create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like.
Testing and Delivery
Test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions. A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are HTML and CSS (Cascading Style Sheets). Validate the code so that your site meets the current web development standards. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Some web designers offer domain name registration and web hosting services. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.
Development
The developmental stage is the point where the web site itself is created. Take all of the individual graphic elements from the prototype and use them to create the actual, functional site. This is typically done by first developing the home page, followed by a "shell" for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site.
<main></main>
The main element is an exact analogue of ARIA's role="main", and is designed to show screen readers and assistive technologies exactly where main content begins, so it can be a target for a "skip links" keyboard command, for example. It could also be used for content syndication (Instapaper-ish things); mobile browsers could zoom in on main when encountering non-responsive websites. It should therefore be used once per page. If you use something like <div id="main"> (or similar, such as <div id="content">), simply replace that with <main role="main">.
HTML
The mark up language use to structure web pages. forms the building blocks of every webpage. If you are looking at a webpage you are looking at the browser's interpretation of the HMTL structure. Browsers read these HTML documents and render them into visible (or audible) webpages.
<div></div>
The workhorse of the HTML tags. Use divs for your different site sections, sidebars, footers, etc.
Planning (Web Design)
This is the point where a site map is developed. The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the web site - aka your customer - must be kept in mind when designing your site. Elements such as what CMS (content management system) such as WordPress to incorporate, will any contact forms be needed, etc. are discussed when planning your web site.
UX designers
Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth. UX designers also look at sub-systems and processes within a system.
ANALYTICS SOFTWARE
UX designers can analyze traffic statistics to hypothesize what types of experiences would be most effective for the audience of the website. A feature-packed and free analytics tool is Google Analytics.
<ul></ul>
Unordered list, perfect for bulleted items.
Maintenance
Update the information on your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site.
How can you optimize for performance?
Use Webpagtest
<th></th>
Use these tags inside your table head to give each column a name.
<em>...</em>
Use these to make portions of your text italic.
<table></table>
Use this tag to add tables to your site.
<tr></tr>
Use this tag to denote a table row.
<strong></strong>
Use to make sections of your text bold.
User Experience
User experience (abbreviated as UX) is how a person feels when interfacing with a system.
UX Design vs Usability
User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface. Usability is big part of the user experience and plays a major role in experiences that are effective and pleasant, but then human factors science, psychology, information architecture and user-centered design principles also play major roles.
USER TESTING AND FEEDBACK SOFTWARE LINK
User feedback tools are abundant. General survey tools such as PollDaddy are flexible solutions that can be used for other tasks, too. There are usability-specific feedback tools, such as Usabilla, and remote user-testing services, such as Feedback Army, which administer usability tests on reviewers.
CONTENT INVENTORY SOFTWARE
Using an on-site server application (for which you'll require access to the Web server) is best for production websites; being closer to the source than third-party software, these applications will naturally be more accurate and efficient. You can use as simple a tool as Excel to create and manage a content inventory. Websites built with content management systems such as WordPress and Drupal typically have built-in tools that show a map of the existing website.
WebP
WebPicture are both lossless and lossy compression. They support transparency and animation. Announced by Google in 2010 to reduce file sizes on the web. Predicts a values, then encodes the difference between the prediction and the actual value. Creation- photoshop plugin and online conversion tool Only supported by the Chrome, Opera, and Android browser.
Why Is UX Important?
Websites have become so complex and feature-rich that, to be effective, they must have great user experience designs. Additionally, users have been accessing websites in an increasing number of ways: mobile devices, a vast landscape of browsers, different types of Internet connections. We've also become aware of the importance of accessibility — i.e. universal access to our Web-based products — not only for those who with special requirements, such as for screen readers and non-traditional input devices, but for those who don't have broadband connections or who have older mobile devices and so forth.
COMPLEX SYSTEMS
multi-faceted websites, interaction-rich Web applications and e-commerce websites
START-UPS
relies on well-rounded individuals, people who can "wear different hats."