Goal-oriented Design for the Web
by Scratch Media
* Understanding goals is a critical factor in the success of any design project.
* This article discusses techniques to help discover the designer’s own goals and gain an insight into what their target audience really wants.
* It aims to help the designer get a clear picture of their purpose, to understand the key goals of their target users and start to visualise a high-value solution that ensures everybody wins.
* Its contents include:
1. About goals: Why goals are important.
2. Your goals: Identifying your personal goals will help you to achieve them.
3. Your site's goals: Identify your web site's goals
4. Users' goals: The importance of understanding users' goals when designing web sites and applications, introducing personas as a design tool.
5. Win-win solutions: The best sites are consciously planned to deliver win-win solutions that deliver both users' goals and achieve the site's goals.
6. Personas: Why using personas in your design process helps avoid common mistakes and creates a better product.
7. The Site Persona and Dialogue Process: Two more powerful tools for modelling the interactions on your web site. Site personas represent the site's brand and goals. The Dialogue Process is a way of designing interactions as conversations between user personas and the site persona.
Saturday, September 5, 2009
Week 7, Reading 1
7 Quick CSS Enhancements for Better User Experience
by David Walsh
Seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.
Change Text Highlight Color
.::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
2.::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you’d like!
Prevent Firefox Scrollbar Jump
1.html { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn’t reach below the fold, thus creating an undesireable “jump.” The above snippet prevents that.
Rounded-Corner Elements
1.input { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
Print Page Breaks
1..page-break { page-break-before:always; }
Don’t forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.
Attribute-Specific Icons
1.a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.
CSS Pointer Cursors
1.input[type=submit],label,select,.pointer { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.
display:block Links
1.#navigation li a { display:block; }
When you’ve built a navigation menu with UL/LI/A elements, be sure to set each anchor ’s display property to “block” so that the user doesn’t necessarily need to hover over the anchor’s text for the link to work.
by David Walsh
Seven quick CSS snippets that will give your website more “pop” and make your user’s experience more functional and enjoyable.
Change Text Highlight Color
.::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
2.::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you’d like!
Prevent Firefox Scrollbar Jump
1.html { overflow-y:scroll; }
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn’t reach below the fold, thus creating an undesireable “jump.” The above snippet prevents that.
Rounded-Corner Elements
1.input { -moz-border-radius:10px; -webkit-border-radius:10px; }
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
Print Page Breaks
1..page-break { page-break-before:always; }
Don’t forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.
Attribute-Specific Icons
1.a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.
CSS Pointer Cursors
1.input[type=submit],label,select,.pointer { cursor:pointer; }
New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.
display:block Links
1.#navigation li a { display:block; }
When you’ve built a navigation menu with UL/LI/A elements, be sure to set each anchor ’s display property to “block” so that the user doesn’t necessarily need to hover over the anchor’s text for the link to work.
Cursor
* The cursor property controls the appearance of the cursor on interactive websites.
* If we had the following included in our CSS: #box {cursor:move;} when the user places their mouse over the div with the id="box", the cursor would change to a plus sign with arrow heads signifying that the div would be dragable.
* There are a whole bunch of different values for the cursor propety: auto; crosshair; default; e-resize; help; move; n-resize; ne-resize; nw-resize; pointer; progress; s-resize; se-resize; sw-resize; text; w-resize; and wait.
* If we had the following included in our CSS: #box {cursor:move;} when the user places their mouse over the div with the id="box", the cursor would change to a plus sign with arrow heads signifying that the div would be dragable.
* There are a whole bunch of different values for the cursor propety: auto; crosshair; default; e-resize; help; move; n-resize; ne-resize; nw-resize; pointer; progress; s-resize; se-resize; sw-resize; text; w-resize; and wait.
Formatting
Text-align
* Can be used to make your site look more professional, e.g. by using the justify value.
* Other values for this property include left, right, inherit and center.
Text-decoration
* Used mostly when formatting hyperlink elements.
* Has values such as overline, underling and line-through.
* You can combine your text-decoration values, e.g. p {text-decoration:overline underline;}
* Be careful if you remove the underline from a hyperlink as the everyday user is used to seeing it there and might not recognise the object as a hyperlink if it is removed.
Letter-spacing
* This property works by allowing us to enter a length value IN ADDITION to the default value of spacing between letters.
* The value can be a positive amount to increase spacing, or a negative amount to decrease spacing.
* If you want to return to the default amount simply use the value {letter-spacing:normal;}
Word-spacing
* This works in a similar way to letter-spacing in that you can have both positive and negative values.
* However be aware that the letter-spacing and word-spacing properties CAN be affected by the {text-align:justify;} property - it depends on the user agent/browser.
Text-transform
* This property allows us to alter how the text would appear in the normal flow of the document.
* It has a number of values, including capitalize, inherit, uppercase, lowercase and none.
* Capitalize means make the first letter of every word a capital, however this is dependant on how a browser determines what is and isn't a word and this may vary from browser to browser.
* Can be used to make your site look more professional, e.g. by using the justify value.
* Other values for this property include left, right, inherit and center.
Text-decoration
* Used mostly when formatting hyperlink elements.
* Has values such as overline, underling and line-through.
* You can combine your text-decoration values, e.g. p {text-decoration:overline underline;}
* Be careful if you remove the underline from a hyperlink as the everyday user is used to seeing it there and might not recognise the object as a hyperlink if it is removed.
Letter-spacing
* This property works by allowing us to enter a length value IN ADDITION to the default value of spacing between letters.
* The value can be a positive amount to increase spacing, or a negative amount to decrease spacing.
* If you want to return to the default amount simply use the value {letter-spacing:normal;}
Word-spacing
* This works in a similar way to letter-spacing in that you can have both positive and negative values.
* However be aware that the letter-spacing and word-spacing properties CAN be affected by the {text-align:justify;} property - it depends on the user agent/browser.
Text-transform
* This property allows us to alter how the text would appear in the normal flow of the document.
* It has a number of values, including capitalize, inherit, uppercase, lowercase and none.
* Capitalize means make the first letter of every word a capital, however this is dependant on how a browser determines what is and isn't a word and this may vary from browser to browser.
Indent
* Some CSS properties give us a finer control over how our text is rendered in the browser.
* The text indent property allows us to place an indent in the first line of a block of text.
* The text can be indented from both the left and the right.
* For example p {text-indent:1.5em;} would give us an indent of 1.5em.
* We can also use pixels and points as values, as well as % which would relate to a percentage of the width of the block of text.
* This can be very handy should we want to hide things like structural headings from the average visitor that we still want to be read by screen reading applications.
* We do this by giving the desired content an indent of say -9000px.
* The text indent property allows us to place an indent in the first line of a block of text.
* The text can be indented from both the left and the right.
* For example p {text-indent:1.5em;} would give us an indent of 1.5em.
* We can also use pixels and points as values, as well as % which would relate to a percentage of the width of the block of text.
* This can be very handy should we want to hide things like structural headings from the average visitor that we still want to be read by screen reading applications.
* We do this by giving the desired content an indent of say -9000px.
Pseudo Class 2
First-of-type
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.
Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.
Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.
Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.
Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.
Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".
Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.
Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.
Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.
Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.
Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.
Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.
Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.
Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".
Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.
Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.
Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.
Pseudo Class 1
* NOT TO BE CONFUSED WITH PSEUDO ELEMENTS.
Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.
Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.
First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.
Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.
* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.
Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.
Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.
Hover
* div:hover {...} would apply the specified CSS rule(s) when the user places their mouse over the div element.
Focus
* a:focus {...} would apply the CSS rule(s) when the object is clicked and it comes into focus, or when you tab to it.
First-child
* li:first-child {...} would apply the CSS rule(s) to only the first element/item in the list.
* NB: It will only match an element if it is the first child of a parent element.
Lang
* This pseudo class is used if we have more than one language on our website.
* :lang(sp) {...} would apply the CSS rule(s) to any Spanish content on the site.
* This would be identified in the HTML by having lang="sp" within the p tag for example.
* THE FOLLOWING PSEUDO-CLASSES ARE FROM CSS3 AND SO MAY NOT BE SUPPORTED BY ALL BROWSERS AS YET.
Last-child
* p:last-child {...} would apply the CSS rule(s) to only the last element, i.e. the last paragraph in the document in this case.
Only-child
* p:only-child {...} would only apply the CSS rule(s) to a div that contained one paragraph for example.
Subscribe to:
Comments (Atom)
