<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?>

<feed xmlns="http://purl.org/atom/ns#" version="0.3" xml:lang="en-US">
<link href="https://www.blogger.com/atom/16695169" rel="service.post" title="RebeccaKim.ca - 216 - Learning Journal" type="application/atom+xml"/>
<link href="https://www.blogger.com/atom/16695169" rel="service.feed" title="RebeccaKim.ca - 216 - Learning Journal" type="application/atom+xml"/>
<title mode="escaped" type="text/html">RebeccaKim.ca - 216 - Learning Journal</title>
<tagline mode="escaped" type="text/html"></tagline>
<link href="http://rebeccakim.ca/216/LearningJournal/" rel="alternate" title="RebeccaKim.ca - 216 - Learning Journal" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169</id>
<modified>2005-12-11T04:49:12Z</modified>
<generator url="http://www.blogger.com/" version="5.15">Blogger</generator>
<info mode="xml" type="text/html">
<div xmlns="http://www.w3.org/1999/xhtml">This is an Atom formatted XML site feed. It is intended to be viewed in a Newsreader or syndicated to another site. Please visit the <a href="http://help.blogger.com/bin/answer.py?answer=697">Blogger Help</a> for more info.</div>
</info>
<convertLineBreaks xmlns="http://www.blogger.com/atom/ns#">true</convertLineBreaks>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113424930599129524" rel="service.edit" title="10.  Introducing the CSS3 Multi-Column Module by Cedric Savarese" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-12-10T13:14:00-08:00</issued>
<modified>2005-12-11T04:49:12Z</modified>
<created>2005-12-10T21:15:05Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/12/10-introducing-css3-multi-column.html" rel="alternate" title="10.  Introducing the CSS3 Multi-Column Module by Cedric Savarese" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113424930599129524</id>
<title mode="escaped" type="text/html">10.  Introducing the CSS3 Multi-Column Module by Cedric Savarese</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<h2 style="font-weight: bold;">
<span style="font-size:85%;">The <span class="caps">CSS3</span> multi-column module</span>
</h2>The <span class="caps">W3C</span> multi-column module is a <span class="caps">CSS</span> level-three working draft, proposed by the <span class="caps">W3C</span> to extend the current <span class="caps">CSS</span> box model.The module’s intent is to allow content to flow into multiple columns inside an element. It offers new <span class="caps">CSS</span> properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.<br/>
<br/>
<a href="http://www.alistapart.com/articles/css3multicolumn">
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/css.jpg"/>
</a>
<br/>
<br/>
<br/>
<p>The proposed new <span class="caps">CSS</span> properties are:</p>      <ul> <li>‘column-count’, to determine the number of columns into which the content of the element will flow.</li>
<li>‘column-width’, to describe the optimal width of each column.</li>
<li>‘column-gap’, to set the padding between columns.</li>
<li>‘column-rule’, to define a border between columns.</li> </ul> You don’t need any knowledge of JavaScript to use it, just upload the file to your site and link it to your page:<br/>
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/css2.jpg" style="width: 429px; height: 33px;"/>
<br/>
<p>You can then start using the <span class="caps">CSS3</span> properties in your stylesheets as you would do for any other <span class="caps">CSS</span>. (<a href="http://www.csscripting.com/css-multi-column/">View example</a>.)</p>
</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113424850533768628" rel="service.edit" title="9. How the &quot;cfcookie&quot; Tag Works" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-12-10T12:56:00-08:00</issued>
<modified>2005-12-10T21:24:22Z</modified>
<created>2005-12-10T21:01:45Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/12/9-how-cfcookie-tag-works_10.html" rel="alternate" title="9. How the &quot;cfcookie&quot; Tag Works" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113424850533768628</id>
<title mode="escaped" type="text/html">9. How the "cfcookie" Tag Works</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="font-weight: bold;">Description</span>
<br/>Defines cookie variables, including expiration and security options.<br/>
<span style="font-weight: bold;">
<br/>
</span>
<span style="font-weight: bold;">category</span>
<span style="font-weight: bold;"/>
<br/>
<a href="http://livedocs.macromedia.com/coldfusion/5.0/CFML_Reference/Tags2.htm#1871847">Variable manipulation tags</a>
<br/>
<br/>
<span style="font-weight: bold;">Syntax</span>
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/cookie2.jpg"/>
<br/>
<span style="font-weight: bold;">Usage<br/>
<br/>
</span>Cookies written with cfcookie are written to the <span style="font-weight: bold;">cookies.txt</span> file when the browser session ends. Until the browser is closed, the cookie resides in memory. If you do not have an expires attribute in a <span style="font-weight: bold;">cfcookie</span>, the cookie exists until the browser is closed. It is never written to the <span style="font-weight: bold;">cookies.txt</span> file.<br/>
<br/>------------------------------------------------------------<br/>
<br/>
<span style="font-weight: bold;">AVIS 216 - Web Form + Cookies Assignment</span>  <br/>The Web Form + Cookies Assignment was opportunity to create a web page based on working XHTML Form Elements, the "<span style="font-weight: bold;">cfmail</span>" tag, <span style="font-weight: bold;">Cookies</span>, and the "<span style="font-weight: bold;">cfloop</span>" tag.<br/>
<br/>Each input element had an  explanatory text that is marked up   using a <span style="font-weight: bold;">LABEL</span> tag.<br/>
<br/>At least two input elements employed COOKIES, so that the Web application could   <i>remember</i> who the user was on subsequent visits.<br/>
<br/>
<br/>
<span style="color: rgb(255, 0, 0);">For example,</span>
<br/>
<br/>For <a href="http://www.rebeccakim.ca/216/Complex-Form/form.cfm">the assignment</a>, I used a LABEL tag for three input elements, First Name, Last Name, and E-mail Address, so the Web application can   <i>remember</i> who the user is on subsequent visits.<br/>
<br/>
<div style="text-align: center;">
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/cookie.jpg"/>
<br/>
</div>
<br/>The form submitted to a page called process.cfm.<br/>
<br/>The <span style="font-weight: bold;">process.cfm </span>page was structured, so that it wrote COOKIES as appropriate to the requirements of the Web application.<br/>
<br/>I understood that the tags store value for <span style="font-weight: bold;">FirstName, LastName, and E-mail tags</span>.</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113424333039580533" rel="service.edit" title="8. Analyze the Organic Job Posting" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-12-10T11:24:00-08:00</issued>
<modified>2005-12-10T19:35:30Z</modified>
<created>2005-12-10T19:35:30Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/12/8-analyze-organic-job-posting.html" rel="alternate" title="8. Analyze the Organic Job Posting" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113424333039580533</id>
<title mode="escaped" type="text/html">8. Analyze the Organic Job Posting</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<div style="text-align: center;">
<br/>
<a href="http://www.organic.com/index.jsp">
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/organic.jpg"/>
</a>
<br/>
</div> <b>
<br/>
<br/>Name of Organization:</b>
<br/>Organic, Inc.<br/>
<br/>
<b>URL of Organization</b>
<br/>http://www.organic.com/<br/>
<br/>
<b>Contact Name</b>
<br/>Interactive Production Artist - Toronto<br/>
<br/>
<br/>
<b>Email</b>
<br/>resumes@organic.com<br/>
<br/>
<br/>
<b>Phone Number:</b> (416) 874-7000<br/>
<br/>
<br/>
<b>Details of Organization:</b>
<br/>Organic designs and builds exceptional online experiences for leading brands by delivering integrated digital marketing communications, including comprehensive websites and online advertising campaigns, that drive brand awareness and more profitable customer relationships. Founded in 1993, Organic has offices in Detroit, Los Angeles, New York, San Francisco, and Toronto. Organic is a top ten interactive agency, according to Advertising Age.<br/>
<br/>
<br/>
<b>Why you are interested in this company:</b>
<br/>This company is seeking an Interactive Production Artist who has multimedia design skills of a Web site, banner ad, interstitial or microsite with other media formats, such as animation, video and audio. If I work at this company as an intern position, I could apply the skills that I have learned and develop my career, including critical thinking, communication, team work and self-descipline.<br/>
<br/>
<b>Address 1:</b> 468 King Street West Suite 100<br/>
<b>City:</b> toronto<br/>
<b>Province:</b> Ontario<br/>
<b>Postal Code:</b> M5V 1L8<br/>
<br/>
<b>Google Map Link:</b>
<br/>
<a href="http://www.rebeccakim.ca/resume/Organic/GoogleMap_Organic.htm" target="_blank">http://www.rebeccakim.ca/resume/Organic/GoogleMap_Organic.htm</a>
<br/>
<br/>
<ul> </ul>
</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113424122329117937" rel="service.edit" title="7. How the Google Search  Web Service Works" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-12-10T11:00:00-08:00</issued>
<modified>2005-12-10T19:08:57Z</modified>
<created>2005-12-10T19:00:23Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/12/7-how-google-search-web-service-works.html" rel="alternate" title="7. How the Google Search  Web Service Works" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113424122329117937</id>
<title mode="escaped" type="text/html">7. How the Google Search  Web Service Works</title>
<content mode="escaped" type="text/html" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">&lt;div align="center"&gt;&lt;span style="color: rgb(204, 153, 0);"&gt;&lt;br /&gt;"With                      Google Web APIs, your computer&lt;br /&gt;             can do the searching for you."&lt;/span&gt;&lt;/div&gt;  &lt;img src="http://www.blogger.com/post-edit.g?blogID=16695169&amp;postID=113114176978459394" alt="" height="1" width="1" /&gt;&lt;br /&gt;&lt;span style=""&gt;&lt;br /&gt;&lt;span style="font-size:85%;"&gt;With the Google Web APIs service,  you can &lt;/span&gt;&lt;/span&gt;&lt;span style="font-size:85%;"&gt;develop your own applications using Google.&lt;/span&gt;&lt;span style=""&gt;&lt;span style="font-size:85%;"&gt;&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;                   To access the Google Web APIs service,  &lt;a href="https://www.google.com/accounts/NewAccount?continue=http://api.google.com/createkey&amp;amp;followup=http://api.google.com/createkey"&gt;create                    a Google Account&lt;/a&gt; and obtain a license key.  &lt;/span&gt;&lt;br /&gt;Then, follow the instructions below.&lt;br /&gt;&lt;br /&gt;&lt;div style="text-align: center;"&gt;&lt;br /&gt;&lt;img src="http://www.rebeccakim.ca/216/LearningJournal/images/searchformcode.jpg" /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;img src="http://www.rebeccakim.ca/216/LearningJournal/images/searchresultcode.jpg" /&gt;</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113421768325552834" rel="service.edit" title="6. How the Google Maps Web Service Works." type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-12-10T04:27:00-08:00</issued>
<modified>2005-12-10T12:31:15Z</modified>
<created>2005-12-10T12:28:03Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/12/6-how-google-maps-web-service-works.html" rel="alternate" title="6. How the Google Maps Web Service Works." type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113421768325552834</id>
<title mode="escaped" type="text/html">6. How the Google Maps Web Service Works.</title>
<content mode="escaped" type="text/html" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">&lt;a href="http://www.google.com/apis/maps/"&gt;The Google Maps API&lt;/a&gt; lets you embed Google Maps in your own web pages.&lt;br /&gt;&lt;br /&gt;To develop your own location-based services using Google Maps, you are acquired &lt;a href="http://www.google.com/apis/maps/signup.html"&gt;API licenses&lt;/a&gt; in order to integrate a Web service into your own domain.&lt;br /&gt;&lt;br /&gt;To use the API, you need to &lt;a href="http://www.google.com/apis/maps/signup.html"&gt;sign up for an API key&lt;/a&gt; and then follow the instructions below.&lt;br /&gt;&lt;br /&gt;&lt;div style="text-align: center;"&gt;&lt;br /&gt;&lt;img src="http://www.rebeccakim.ca/216/LearningJournal/images/googlemapflow.jpg"&gt;&lt;br /&gt;&lt;/div&gt;</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113114200638878150" rel="service.edit" title="4. Chapters 7 &amp; 8 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-11-04T14:06:00-08:00</issued>
<modified>2005-12-11T02:41:29Z</modified>
<created>2005-11-04T22:06:46Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/11/4-chapters-7-8-of-steve-krugs-dont.html" rel="alternate" title="4. Chapters 7 &amp; 8 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113114200638878150</id>
<title mode="escaped" type="text/html">4. Chapters 7 &amp; 8 of Steve Krug's "Don't Make Me Think!"</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="font-weight: bold;">
<br/>
<span style="color: rgb(255, 0, 0);">The first step in recovery is admitting that the Home page is beyond your control</span>
</span>
<br/>Designing The Home Page<br/>
<br/>
<span style="font-weight: bold;">The Home page has to accommodate:</span>
<br/>- Site identity and mission.<br/>- Site hierarehy.<br/>- Search.<br/>- Teases.<br/>- Timely contnt.<br/>- Deals.<br/>- Shortcuts.<br/>- Registratin.<br/>- Show me what I'm looking for.<br/>- ...and what I'm not looking for.<br/>- Show me where to start.<br/>- Establish credibility and trust.<br/>
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img7.jpg"/>
<br/>
<br/>
<span style="font-weight: bold;">And you have to do it ... blindfolded</span>
<br/>
<br/>- Everybody wants a piece of it.<br/>- Too many cooks.<br/>- One size fits all.<br/>
<span style="font-weight: bold;">
<br/>How to get the message across</span>
<br/>- The tagline : we read it as a description of the whole site.<br/>- The Welcome blurb.<br/>- Use as much space as necessary<br/>- ... but don't use any more space than necessary.<br/>- Don't use a mission statement as a Welcome blurb.<br/>- It's one of the most important things to test.<br/>
<br/>
<span style="font-weight: bold;">Nothing beats a good tagline!<br/>
</span>- They are clear and informative.<br/>- They are just long enough.<br/>- They convey differentiation and a clear benefit.<br/>- They are personable, lively, and sometimes clever.<br/>
<br/>
<span style="font-weight: bold;">The fifth question,  "Where do I start?"</span>
<br/>The Home page has to answer for visitors or users.<br/>- Here's where to start if they want to search.<br/>- Here's where to start if they want to browse.<br/>- Here's where to start if I want to sample their best stuff.<br/>
<br/>
<span style="font-weight: bold;">Home page navigation ca be unique</span>
<br/>- Section descriptions.<br/>- Different orientation.<br/>- More space for identity.<br/>
<br/>
<span style="font-weight: bold;">The trouble with pulldowns</span>
<br/>- You have to seek them out.<br/>- They're hard to scan.<br/>- They're twitchy.<br/>
<span style="font-weight: bold;"/>
<span style="font-weight: bold;">
<br/>
<br/>
</span>
<span style="color: rgb(255, 0, 0); font-weight: bold;">"The Farmer and the Cowman Should be Friends" </span>
<br/>Why most web design team arguments about usablility are a waste of time, and how to aboid them.<br/>
<br/>The right kind of question to ask is "Does this pulldown, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?"<br/>
<br/>There is really one way to answer that kind of question: testing.  You have to use the collective skill, experience, creativity, and common sense of the team to build some version of the thing (even a crude version), then watch ordinary people carefully as they try to figure out what it is and how to use it.</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113114197635027314" rel="service.edit" title="2. Chapters 3 &amp; 4 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-11-04T14:06:00-08:00</issued>
<modified>2005-12-11T02:18:16Z</modified>
<created>2005-11-04T22:06:16Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/11/2-chapters-3-4-of-steve-krugs-dont.html" rel="alternate" title="2. Chapters 3 &amp; 4 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113114197635027314</id>
<title mode="escaped" type="text/html">2. Chapters 3 &amp; 4 of Steve Krug's "Don't Make Me Think!"</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="font-weight: bold; color: rgb(255, 0, 0);">Billboard Design 101<br/>
<br/>
</span>There are five important things you can do to make sure visitors see and understand as much of your site as possible:<br/>
<br/>1.  Crete a clear visual hierarchy on each page <ul>   <li>The more important something is, the more prominent it is.</li>   <li>Things that are related logically are also related visually.</li>   <li>Things are "nested" visually to show what's part of what.</li> </ul> 2.  Take advantage of conventions<br/>
<ul>   <li>Conventions are your friends.</li>   <li>Designers are often reluctant to take advantage of them.</li> </ul>  3. Break pages up into clearly defined areas<br/>4. Make it obvious what's clickable<br/>5. Keep the noise down to a dull roar<br/>
<ul>   <li> Busy-ness<br/>
</li>   <li>Background noise</li> </ul>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img3.jpg"/>
<br/>
<br/>
<span style="color: rgb(255, 0, 0); font-weight: bold;">Animal, vegetable, or mineral?</span>
<br/>
<br/>Making choices on the Web should be clear for users to understand.<br/>Web Designers and usability professionals have spent a lot of time over the years debating how many times you can expect users to click to get what they want without getting too frustrated.<br/>
<br/>We face choices all the time on the Web.  Making the choices mindless is one of the main things that make a site easy to use.</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113114202102139086" rel="service.edit" title="5. Chapters 9, 10 &amp; 11 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-11-04T14:06:00-08:00</issued>
<modified>2005-12-11T02:46:36Z</modified>
<created>2005-11-04T22:07:01Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/11/5-chapters-9-10-11-of-steve-krugs-dont.html" rel="alternate" title="5. Chapters 9, 10 &amp; 11 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113114202102139086</id>
<title mode="escaped" type="text/html">5. Chapters 9, 10 &amp; 11 of Steve Krug's "Don't Make Me Think!"</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="color: rgb(255, 0, 0); font-weight: bold;">Usability testing on 10 cents a day</span>
<br/>Keeping testing simple - so you do enough of it.<br/>
<br/>
<span style="font-weight: bold;">Several true things about testing<br/>
</span>
<br/>1. If you want a great site, you've got to test.<br/>
<ul>   <li>The only way to find out if it really works is to test it. Testing reminds you that not everyone thinks the way you do, knows what you know, uses the Web the way you do.</li> </ul> 2. Testing on user is 100 percent better than testing none.<br/>
<ul>   <li>  Testing always works, and the user will show you important things you can do to improve your site.</li> </ul> 3. Testing on user early in the project is better than testing 50 near the end.<br/>
<ul>   <li>A simple test early is almost always more valuable than a sophisticated test later.</li> </ul> 4. The importance of recruiting representative users is overrated.<br/>
<ul>   <li>  It's good to do your testing with people who are like the people who will use your site.</li> </ul>  5. The point of testing is not to prove or disprove something.  It's to inform your judgment.<br/>
<br/>6. Testing is an iterative process.<br/>
<ul>   <li>   You make something, test it, fix it, and test it again.</li> </ul> 7. Nothing beats a live audience reaction.<br/>
<br/>
<span style="font-weight: bold;">
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img9.jpg"/>
<br/>
<br/>
</span>
<span style="font-weight: bold;">How many users should you test?</span>
<br/>Testing tree or four users makes it possible to test and debrief in the same day, so you can take advantage of what you've learned right away.<br/>
<span style="font-weight: bold;">
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img10.jpg"/>
<br/>
<br/>Recruit loosely and grade on a curve<br/>
</span>Take anyone you can get (within limits) and grade on a curve.<br/>Try to find users who reflect your audience, but don't get hung up about it <span style="font-weight: bold;">
<br/>
</span> <ul>   <li> We're all beginners under the skin.</li>   <li>It's usually not a good idea to design a site so that only your target audience can use it.</li>   <li>Experts are rarely insulted by something that is clear enough for beginners.<br/>
</li> </ul>
<span style="font-weight: bold;">The exceptions:</span>
<br/>
<ul>   <li>If your site is going to be used almost exclusively by one type of user and it's no harder to recruit from that group, then test just women.</li>   <li>If your audience is split between clearly divined groups with very divergent interests and needs, then you need to test users from each group at least once.</li>   <li>If using your site requires specific domain knowledge, then you need to recruit people with that domain knowledge for at least one round of test.<br/>
</li> </ul> <span style="font-weight: bold;">When you're recruiting:</span>
<br/>- Offer a reasonable incentive.<br/>- Keep the invitation simple.<br/>- Avoid discussing the site (or the organization behind the site) beforehand.<br/>- Don't be embarrassed to ask friends and neighbors.<br/>
<br/>
<span style="font-weight: bold;">Where do you test?</span>
<br/>You need is an office or conference room with two chairs, a PC or MAC, a camcorder, a long video cable, and a tripod.<br/>
<br/>
<span style="font-weight: bold;">Who should do the testing?</span>
<br/>Try to choose someone who tends to be patient, calm, empathetic, a good listener, and inherently fair.<br/>
<br/>
<span style="font-weight: bold;">Who should observe?</span>
<br/>It's a good idea to encourage everyone - team members, people from marketing and business development, and any other stakeholders to attend.<br/>
<br/>
<span style="font-weight: bold;">What do you test, and when do you test it?</span>
<br/>- "Get it" testing<br/>- Key task testing<br/>
<br/>
<span style="font-weight: bold;">Review the results right away<br/>
</span>Do three or four tests in a morning and then debrief over lunch.<br/>- Triage: reviewing the problems people saw and deciding which ones need to be fixed.<br/>- Problem solving: figuring out how to fix them.<br/>
<br/>
<span style="font-weight: bold;">Typical problems </span>
<br/>- Users are unclear on the concept.<br/>- The words they're looking for aren't there.<br/>- There's too much going on.<br/>
<br/>
<span style="font-weight: bold;">Some triage guidelines.</span>
<br/>- Ignore "kayak" problems.<br/>- Resist the impulse to add things.<br/>- Take "new feature" requests with a grain of salt.<br/>- Grab the low-hanging fruit.<br/>
<br/>
<span style="font-weight: bold;"/>
<br/>
<span style="font-weight: bold; color: rgb(255, 0, 0);">Usability as common courtesy<br/>
</span>
<span style="color: rgb(255, 0, 0);">
<span style="color: rgb(0, 0, 0);">Why your web site should be a mensch.<br/>
<br/>
</span>
</span>
<span style="font-weight: bold;">The Reservoir of Goodwill<br/>It is useful to imagine that every time we enter a Web site<br/>
</span>  - It's idiosyncratic.<br/>- It's situational.<br/>- You can refill it.<br/>- Sometimes a single mistake can empty it.<br/>
<br/>
<span style="font-weight: bold;">Things that diminish goodwill</span>
<br/>Here are a few of the thins that tend to make users feel like the people publishing a site don't hae their best interests at heart:<br/>
<br/>- Hiding information that I want<br/>- Punishing me for not doing things your way.<br/>- Asking me for informatin you don't really need.<br/>- Shucking and jiving me.<br/>- Putting sizzle in my way.<br/>- Your site looks amateurish.<br/>
<br/>
<span style="font-weight: bold;">Things that increase goodwill<br/>
</span>  - Know the main things that people want to do onyour site and make them obvious and easy.<br/>- Tell me what I want to know.<br/>- Save me steps wherever you can.<br/>- Put effort into it.<br/>- Know what questions I'm likely to have, and answer them.<br/>- Provide me with creature comforts like printer-friendly pages.<br/>- Make it easy to recover form errors.<br/>- When in doubt, apologize.<br/>
<br/>
<br/>
<span style="font-weight: bold; color: rgb(255, 0, 0);">Accessibility, Cascading Style Sheets, and you</span>
<br/>Just when you think you're done, a cat floats by with buttered toast strapped to its back<br/>
<br/>
<span style="font-weight: bold;">What developers and designers hear</span>
<br/>Two arguments in particular thend to make them skeptical:<br/>- A large percentage of the population actually needs help accessing the Web.<br/>- The idea that making things more accessible benefits everyone.<br/>
<br/>
<span style="font-weight: bold;">What designers and developers fear</span>
<br/>- More work.<br/>- Compromised design.<br/>
<br/>
<span style="font-weight: bold;">The real solution - as usual - a few years away</span>
<br/>The five things you can do right now<br/>
<br/>1. Fix the usability problems that confuse everyone<br/>
<br/>2. Read this article before you read anything else about accessibility<br/>.<br/>3. Read a book. (<span style="font-style: italic;">Buiding Accessible Websites</span> by Joe Clark, <span style="font-style: italic;">Constructing Accessible Websites</span> by Jim Thatcher et al, <span style="font-style: italic;">Maximum Accessibility</span>: <span style="font-style: italic;">Making Your Web Site More Usable for Everyone</span> by John Slatin and Sharron Rush, and A CD-ROM called <span style="font-style: italic;">The WebAIM Guide to Web Accessibility Techniques and Concepts)<br/>
<br/>
</span>4. Start using Cascading Style Sheets<br/>- Infinitely greater control of formatting.<br/>- Flexibility.<br/>- Consistency among browsers.<br/>- Serialize your content.<br/>- Allow your text to resize.<br/>
<br/>5. Go for the low-hanging fruit<br/>- Add appropriate alt text to every image.<br/>- Make your forms work with screen readers.<br/>- Create a "Skip to Main Content" link at the beginning of each page.<br/>- Make all content accessible by keyboard.<br/>- Don't use JavaScript without a good reason.<br/>- Use client-side (not server-side) image maps.</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113114199094064330" rel="service.edit" title="3. Chapters 5 &amp; 6 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-11-04T14:06:00-08:00</issued>
<modified>2005-12-11T02:26:18Z</modified>
<created>2005-11-04T22:06:30Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/11/3-chapters-5-6-of-steve-krugs-dont.html" rel="alternate" title="3. Chapters 5 &amp; 6 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113114199094064330</id>
<title mode="escaped" type="text/html">3. Chapters 5 &amp; 6 of Steve Krug's "Don't Make Me Think!"</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="color: rgb(255, 0, 0); font-weight: bold;">Omit Needless Words</span>
<br/>
<br/>There are several beneficial effects for getting rid of all needless words:<br/>- It reduces the noise level of th epage.<br/>- It makes the useful content more prominent.<br/>- It makes the pages shorter, allowing users to see more of each page at a<br/>glance without scrolling.<br/>
<br/>
<span style="font-weight: bold;">Happy talk must die</span>
<br/>- Most Web usders don't have time for small talk and want to get right to the point.<br/>- You should eliminate as much happy talk as possible.<br/>
<br/>
<span style="font-weight: bold;">Instructions must die</span>
<br/>- No one is going to read instructions at least not until after repeated attempts<br/>at "muddling through" have failed.<br/>
<br/>
<br/>
<span style="color: rgb(255, 0, 0); font-weight: bold;">Street Signs and Breadcrumbs: </span>Designing Navigation<span style="font-weight: bold;">
<br/>
</span>
<span style="font-weight: bold;">
<br/>
</span>
<span style="font-weight: bold;">Web Navigation 101<br/>
</span>- You're usually trying to find something.<br/>- You decide whether to ask first or browse first.<br/>- If you choose to browse, you make your way through a hierarehy, using signs to guide you.<br/>- Eventually, if you can't find what you're looking for, you'll leave.<br/>
<br/>
<span style="font-weight: bold;">The unbearable lightness of browsing</span>
<br/>- No sense of scale.<br/>- No secnse of direction.<br/>- No secnse oflocation.<br/>
<br/>
<span style="font-weight: bold;">The overlooked purposed of navigation</span>
<br/>- It gives us something to hold on to.<br/>- It tells us what's here.<br/>- It tells us how to use the site.<br/>- It gives us confidence in the people who built it.<br/>
<br/>
<span style="font-weight: bold;">Web navigation conventions<br/>
</span>The conventions specify the appearance and location of the navigation elements , so we know what to look for and where to look when we need them.<br/>
<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img4.jpg"/>
<br/>
<br/>
<span style="font-weight: bold;"/>
<span style="font-weight: bold;">Don't look now, but I think it's following us<br/>
</span>Persistent navigation should include the five elements you most need to have on hand at all times: Site ID, A way home, A way to search, Sections, and Utilities.<br/>
<br/>
<span style="font-weight: bold;"/>
<span style="font-weight: bold;">Did I say every page?<br/>
</span>There are two exceptions not to us the persistent navigation.<span style="font-weight: bold;">
<br/>
</span>- The Home page<br/>- Forms<br/>
<br/>
<span style="font-weight: bold;"/>
<span style="font-weight: bold;">Now I know we're not in Kansas.<br/>
</span>The Site ID represents the whole site meaning its the highest thing in the logical hierarchy of the site.<br/>
<span style="font-weight: bold;">
<br/>The Sections </span>
<br/>- are  called the primary navigation.<br/>- are the links to the main sections of the site: the top level of the site's hierarchy.<br/>
<span style="font-weight: bold;">
<br/>The Utilities</span>
<br/>- These are things (Help, A Site Map, or A Shopping Cart) or information (About Us and Contact Us)<br/>- The Utilities list should be slightly less prominent than the Sections.<br/>
<br/>
<span style="font-weight: bold;">Just click your heels three times and say, "There's no place like home.''</span>
<br/>- It is a good idea to include a Home page link in either the Sections or the Utilities, or add the word "Home" discreetly to the Site ID everywhere.<br/>
<br/>
<span style="font-weight: bold;">A way to search</span>
<br/>- Make it as a simple formula : a box, a button, and the word "Search."<br/>
<br/>
<span style="font-weight: bold;">Page names</span>
<br/>- Every page needs a name.<br/>- The name needs to be in the right place.<br/>- The name needs to be prominent.<br/>-  The name needs to match what I clicked.<br/>
<br/>
<span style="font-weight: bold;">Using tabs for navigation is a good idea.</span>
<br/>- They're self-evident.<br/>- They're hard to miss.<br/>- They're slick.<br/>- They suggest a physical space.<br/>
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img5.jpg"/>
<br/>
<br/>
<span style="font-weight: bold;">Try the truck test<br/>
</span>For good Web navigation, you should be able to answer these questions without hesitation:<br/>- What site is this? (Sote ID)<br/>- What page am I on? (Page name)<br/>- What are the major sections of this site?(Sections)<br/>- What are my options at this level? (Local navigation)<br/>- Where am I in the scheme of things? ("You are here" indicatiors)<br/>- How can I search?<br/>
<br/>
<span style="font-weight: bold;"/>
</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
<entry xmlns="http://purl.org/atom/ns#">
<link href="https://www.blogger.com/atom/16695169/113114195402150216" rel="service.edit" title="1. Chapters 1 &amp; 2 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="application/atom+xml"/>
<author>
<name>Rebecca Kim</name>
</author>
<issued>2005-11-04T14:05:00-08:00</issued>
<modified>2005-12-11T02:17:24Z</modified>
<created>2005-11-04T22:05:54Z</created>
<link href="http://rebeccakim.ca/216/LearningJournal/2005/11/1-chapters-1-2-of-steve-krugs-dont.html" rel="alternate" title="1. Chapters 1 &amp; 2 of Steve Krug's &quot;Don't Make Me Think!&quot;" type="text/html"/>
<id>tag:blogger.com,1999:blog-16695169.post-113114195402150216</id>
<title mode="escaped" type="text/html">1. Chapters 1 &amp; 2 of Steve Krug's "Don't Make Me Think!"</title>
<content type="application/xhtml+xml" xml:base="http://rebeccakim.ca/216/LearningJournal/" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml">
<span style="font-weight: bold; color: rgb(255, 0, 0);font-family:verdana;">"Don't make me think!"</span>
<span style="font-family:verdana;"> Krug's First Law of Usability</span>
<br/>
<br/>
<span style="font-family:verdana;">A web page should be self-evident, obvious, and self-explanatory. Users should be able to "get it" what it is and how to use it without expending any effort thinking about it.</span>
<br/>
<br/>
<span style="font-family:verdana;">For example,</span>
<br/>
<span style="font-family:verdana;">1. A page that doesn't make users think:</span>
<br/>
<span style="font-family:verdana;">  - Ok. This looks like the product categories...</span>
<br/>
<span style="font-family:verdana;">  - Memory, Modems..  There it is: Monitors. Click.</span>
<br/>
<span style="font-family:verdana;">  - ...and these are today's special deals.</span>
<br/>
<br/>
<span style="font-family:verdana;">2. A page that makes users think looks like:</span>
<br/>
<span style="font-family:verdana;">    Things that visitors to a site shouldn't spend their time thinking about  </span>
<br/>
<span style="font-family:verdana;">  - Where am I?</span>
<br/>
<span style="font-family:verdana;">  - Where should I begin?</span>
<br/>
<span style="font-family:verdana;">  - Where did they put___?</span>
<br/>
<span style="font-family:verdana;">  - What are the most important things on this page?</span>
<br/>
<span style="font-family:verdana;">  - Why did they call it that?<br/>
<br/>
<span style="font-weight: bold;">Things that make us think</span>
</span>
<br/>
<div style="text-align: center;"> <div style="text-align: left;">
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img1.jpg"/>
<br/>
<br/>
</div> <div style="text-align: left;">
<img src="http://www.rebeccakim.ca/216/LearningJournal/images/img2.jpg"/>
<br/>
</div> </div>
<br/>
<span style="font-family:verdana;">How we really use the Web, the main reason why it's important not to make me thinks is that most people are going to spend far less time looking at the pages we design than we'd like to think.</span>
<br/>
<br/>
<span style="font-family:verdana;">If Web pages are going to be effective, they have to work most of their magic at a glance. And the best way to do this is to create pages that are self-evident, or at least self-explanatory.</span>
<br/>
<br/>
<span style="color: rgb(255, 0, 0); font-weight: bold;font-family:verdana;">How we really use the Web<br/>
<br/>
</span>
<span style="font-family:verdana;">To design effective Web pages, you have to learn to live with three facts about real-world Web use:</span>
<br/>
<br/>
<span style="font-family:verdana;">  1.  We don't read pages.   We scan them.</span>
<br/>
<ul style="font-family: times new roman;"> <li>We're usually in a hurry.</li>
<li>We know we don't need to read everything.</li> <li>We're good at it.<br/>
</li> </ul>
<span style="font-family:verdana;">   2.  We don't make optimal choices.   We satisfice.</span>
<br/>
<ul style="font-family: times new roman;">   <li>We're usually in a hurry.</li>   <li>There's not much of a penalty for guessing wrong.</li>   <li>Weighing options may not improve our chances.</li>   <li>Guessing is more fun.<br/>
</li> </ul>
<span style="font-family:verdana;">   3.  We don't figure out how things work.  We muddle through.</span>
<br/>
<ul style="font-family: times new roman;">   <li>It's not important to us.</li>   <li>If we find something that works, we stick to it.</li> </ul>
<span style=";font-family:verdana;font-size:85%;">
<span style="color: rgb(255, 0, 0);">      *  "Why are things always in the last place you look for them?"</span>
<br/>
<span style="color: rgb(255, 0, 0);">        " Because you stop looking wen you find them." </span>
</span>
<span style="font-family:verdana;">        </span>
<span style=";font-family:verdana;font-size:78%;">- Children's Riddle</span>
</div>
</content>
<draft xmlns="http://purl.org/atom-blog/ns#">false</draft>
</entry>
</feed>

