Wednesday, September 7, 2011

Monday, September 5, 2011

Week 8 Reading

Personally I had a hard time reading the information from this reading. There's a lot of it and in many places repetitive. There's some good pieces here and there, like screen sizes. Here are my bits and pieces from the reading thus far…
  • The display is essential for viewing and multi-touch interaction. The user’s focus is on the content. The comfortable minimum size is 44 x 44 points.
  • How an app launches should be oriented the same as the Home Screen. The home screen view is based on the device, iPhone and iPod displays in portrait; iPad can display in all orientations.
  • Use iOS standards: gestures, i.e. tap, drag, flick, swipe, double tap, pinch open/close, touch and hold, and shake for the comfort of the user; controls, views and icons; incorporates device features in a reliable way
  • Be mindful of app multitasking which allows other apps to run in the background.
  • Online User help should be minimal, program intuitive.
  • The interface is a collection of screens, single windows.
  • Two types of software in iOS: iOS apps, web content. iOS uses SDK to run natively on device. Web content is hosted by a website.
  • Safari on iOS supports cookies and HTML5, but does not support Flash, Java or third party plug-ins. Can use JavaScript and CSS3 transforms, transitions and animations.
  • Functionality is similar to website, it should work. Aesthetics should be consistent with the function of the app, i.e. if it’s a game then a beautiful appearance is expected.
  • People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations. Use subtle animation, like highlighting items, etc.

Related links

UI Guidelines for mobile and tablet web app design
http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design

40 Awesome iPhone application websites from webdesigner depot
http://www.webdesignerdepot.com/2009/04/40-awesome-iphone-application-websites/

How to create your first iPhone application from Smashing Magazine
How to http://coding.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/

Week 7 Reading

Chapter 12, “Help! My wants me to (fill in the blank).” Technically the last chapter, but simple and sweet! I really enjoyed reading this book and I’m actually disappointed that this is “The End.” In this chapter the author points out there are usually good intentions behind a bosses’ “bad design idea” and that they’re not just being perverse. Human nature seems to pit one against the other without understanding the other person’s point of view, especially when it comes to execs vs. layperson, so this brings it back to a two-way communication and respecting each other’s ideas and reasons.

His email samples are awesome! I would have loved to attend one of his seminars and have him send my boss an email. Ah, to be a fly on the wall when she read that! Basically, it comes down to doing research and having supportive data to backup your argument and the author definitely provides that in his email. And he keeps it diplomatic so as to not alienate one or the other. It also helps to come from a third party so the boss doesn’t think your being bias based on your own personal wants. I read the section of recommended readings and was amazed how many text the author recommends.

Related web sites/links:

Getting Started with Defensive Web Design by Ian Lurie, May 27, 2001
http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Defensive Design for the Web
http://gettingreal.37signals.com/ch09_Get_Defensive.php

Usability.gov Research-based Guidelines
http://usability.gov/guidelines/index.html

Forms that work: Designing a web forms for usability
http://formsthatwork.com/

Usability News

http://psychology.wichita.edu/surl/

Tuesday, August 30, 2011

e-commerce project

Wednesday, August 24, 2011

Skip to Main Contents

I was curious about "skip to main content link" mentioned in our class book, so I looked it up. Good stuff!
http://www.webnauts.net/skip-to-main-content.html
http://webaim.org/techniques/skipnav/



Monday, August 22, 2011

Week 6 Reading Response and Links

Chapter 10, “Usability as a common courtesy,” if only everyone could use web common courtesy! The author boiled it down to a “goodwill reservoir.” If a user visits a site full of goodwill and encounters obstacles, their goodwill diminishes and affects future use of the site and their overall vision of the company. Goodwill can be replenished or depleted depending on the user’s situational goodwill when entering a site – i.e., how many sites have they been to before yours and is their goodwill reservoir already low?

Depleting User’s Goodwill:
  • Hiding info, i.e. shipping rates, prices, customer phone numbers
  • Requesting information that isn’t needed for the particular circumstances
  • “Bedazzle” – flash usage or cumbersome ads that are in the way to what the user needs
  • Amateur design

Replenishing Goodwill:
  • Displaying the obvious points/needs
  • Being up front
  • Save the user extra steps
  • Make content useful
  • FAQ – updated and candid
  • Comfort luxury – like printable pages
  • Error recovery
  • Apologize – let the customer know you’re aware of a situation but can’t fix it

Chapter 11, Accessibility - first and foremost, it’s the law, as indicated in Section 508 of the Amendments to the Rehabilitation Act. I think we’ve come a long way in web design since the author’s book came out in 2006. Better developer tools are here, CSS has made real progress and all browsers use it. But the basic principles the author points out are still the best advice:
  • Fix the usability problems that confuse everyone – if it confuses the average users than it’ll certainly confuse a handicapped person even more. User testing will point out what confuses the “average user.”
  • Read an article or book, surf the web, attend conferences – keep up to date on web conventions and accessibility tools and understand the software and hardware that handicapped persons are using.
  • When using CSS: use the alt text for images; use form decorum by using HTML label elements; create a “skip to main content” link; make content accessible by keyboard; client side image maps instead of server side maps.


Web Accessibility for Section 508
By Jim Thatcher
Jim Thatcher.com, 7/30/11
http://www.jimthatcher.com/webcourse1.htm

Web Accessibility Initiative (WAI)
W3C Web Accessibility Initiative, accessed 8/22/11
http://www.w3.org/WAI/

Wave – web accessibility evaluation tool
accessed 8/22/11
http://wave.webaim.org/
3 thumbs up!!!!

25-point Website Usability Checklist
Usereffect – Strategic Web Usability, accessed 8/22/11
http://www.usereffect.com/topic/25-point-website-usability-checklist

Monday, August 15, 2011

E-Commerce wireframe

eCommerce thumbnails





Week 5 Reading Response and links

I could easily relate to chapter 8 because of my most recent position as a graphic designer in a Communications department. I had to answer to a supervisor, who answered to a marketing director, who answered to the CEO, who answered to a board! We had one web guy and I recall that when we were revamping the website they had usability test done. A lot of discussions went on over each department’s territory. So I’ve seen the cowboy vs. the farmer scenario in practice! It’s true that folks tend to project their personal opinions to “everybody” or the “average user.”

The designer and developer comparison as the cultures of hype and craft hit home. Hype culture defined as upper management, marketing and business development; and craft, being designers and programmers. Invariably these groups do have different objectives. But the big picture is that they have the same goal, just different ways to get there. As I was reading I thought, “How do you fix this?” Getting over the myth that there’s an “average user” is a good start. All web users are unique and each use the web differently with different goals offset by experiences. Another answer is to do testing, which leads to chapter 9.

Chapter 9 is all about usability testing, not to be confused with focus groups. The difference between the two comes down to reactions. A focus group will have a group reaction and a usability testing will have individual reactions. Focus groups should be used before beginning the web design. Usability testing will tell you if people can actually use your site. The author recommends testing four people with each test, test early, test often, and keep it simple. Anyone can do the testing but someone with patience is recommended. Invite everyone involved to the test including management. Record what the test users are doing on the screen. Review the results immediately following the test and decide on what needs to be fixed and problem solving. I especially appreciated the usability script that the author includes at the end of the chapter. It helps me to understand and focus on how to do a test. And do it in a way that gets results.

Usability Testing Demystified
By Dana Chisnell
A List Apart, 10/6/09
http://www.alistapart.com/articles/usability-testing-demystified/

Why you only need to test with 5 users
By Jakob Nielsen
Jakob Nielsen’s Alertbox, 3/19/2000
http://www.useit.com/alertbox/20000319.html

Morae – usability testing and marketing research software
TechSmith, 8/15/11
http://www.techsmith.com/morae/uses.asp

Monday, August 8, 2011

eCommerce Moodboard

eCommerce Concept Statement

Week 4 Reading Response

Chapter 7 focuses on the home page of a website. The home page contains a good bit of info: site identity and mission; site hierarchy (content, features, persistent navigation); a search function; teases (promos); timely content; deals; shortcuts (to regularly used links); and registration (if applicable). That’s just the tip of the iceberg.

I like the analogy that a “home page is like waterfront property; everyone wants a piece of it” but there isn’t enough to go around. There’s so much the home page has to convey to the user, and it has to be done well and at a glance. One of the most important goals is to convey the big picture – “make it clear what the sites is.” Does it answer: What is this? What do they have here? What can I do? Why should I be here and not somewhere else?

Most users will probably try to guess what the site is first from the overall content of the home page. I’ve noticed that I scan a website, especially the book example, and do just that – what does it look like at first glance, is this something I’m interested in, where’s the stuff I need?

Some of what I read was timely information, for example the welcome blurb shouldn’t be the mission statement. I’m currently working on a class project for an actual client and they do exactly that. The information about the tagline is good to keep in mind as well. While it may be obvious, some key points in a tagline are: be clear and informative, use six-to-eight words to convey a full thought, and convey the benefit – what makes it great.

Sunday, August 7, 2011

Week 4 Reading Links

Bradley, Steve (Dec. 22, 2009). How to design an effective home page. Vanseodesign. Aug. 7, 2011
http://www.vanseodesign.com/web-design/home-page-design/

Powazek, Derek (Jan. 30, 006). Home Page Goals.A List Apart. Aug. 7, 2011
http://www.alistapart.com/articles/homepagegoals/

Szuc, Daniel (Aug. 6, 2007). Home Page Design. UXmatters. Aug. 7, 2011
http://www.uxmatters.com/mt/archives/2007/08/home-page-design.php

Friday, August 5, 2011

User Experience and design

Good stuff on designing web sites.

Tuesday, August 2, 2011

Sunday, July 31, 2011

Week 3 Reading

In this chapter the author talks about navigation. In a real space, such as a store, signs are hung from the ceiling to direct customers to different sections. In virtual space, such as the web, directions are even more important because “we’re inherently lost when we’re on the web due to no sense of location, direction or scale.” Web designers can do this by using navigation. Done correctly, navigation is the only direction you’ll need. “Link-dominant users” (aka: browsers) need clear navigation, without it they may get frustrated and leave the site or never come back again.

Designers should embrace web conventions. The basic elements of web conventions are: site ID (logo); sections (top level of hierarchy and subsections); utilities (help, about us); home and search. The site ID usually appears in the upper left corner and should have attributes of a brand logo – distinctive typeface and graphic. The utilities section should be less prominent than the other navigation. Home can be viewed as a fresh start or the North Star; it allows the user to return should they get lost. A way to search allows the “search-dominant user” (aka: the person who asks for help when they enter a store) to find their information directly.

Other vital information to include in navigation is page names, “you are here,” and breadcrumbs. Page names are like street signs on the web. They should use several visual cues: highlight, change color, frame and match the content, and they should be in the right place. “You Are Here” shows the user where they are. It can be displayed in the navigation bar or at the top of the page by putting a pointer next to it, changing the text color, use boldface, reverse the button, or change the color of the button. Lastly, breadcrumbs are the turn-by-turn directions on a website. Breadcrumbs should be at the top of the page in small type. It shows the user how they got there by displaying each levels, or sections and subsections, generally divided by the greater than symbol >.

To test if a site has good navigation, try the trunk test. Imagine being blindfolded in a trunk and then released at some point in a web site. If the site is well designed, the following questions should be answered without hesitation:
1. What site is this? Site ID
2. What page am I on? Page name
3. What are the major sections of this site? Sections
4. What are my options at this level? Local navigation
5. Where am I in the scheme of things? “You Are Here”
6. How can I search? Search button

Three related links to this chapter’s subject:
Jakob Nielsen’s, “Search and You May Find”
Iain Barker, “What is Information Architecture?”; Step Two Designs
Whitney Hess, “10 Most Common Misconceptions about User Experience Design”; Mashable

Tuesday, July 26, 2011

Monday, July 25, 2011

Concept Statement project

Create a list of all users that may visit your site (not from the WWW but those you’d invite).
  • Potential employers
  • Freelance opportunities
  • Colleagues
  • Instructors
What will each of those users want to see in order to enjoy their visit to your site?
  • Portfolio – examples of work
  • Contact information
  • Referrals
Name your intended audience (the person(s) you need to persuade.)
  • Potential employers
  • Freelance opportunities
Describe what you need to inform and persuade them of:
  • Promote my: competency in graphic design
  • Goals of the site are: attractive site that encourages exploration of portfolio and potential contact
  • My ultimate message/philosophy (about who you are): that I’m creative and professional
  • What is the story you are telling? I have experience in typesetting, print and graphic design and an incumbent to web design and interactive media
List the assets you need to persuade the user: Which 7 (minimum) projects? scans of what?, photos of what objects? images from what computer graphics program? what descriptive text? list them.
  • Portfolio examples
  • Images of a projector and projector screen (to display interactive media examples)
  • Image of Multilith printing press and graphic of page with folder corner (to display print examples)
  • Graphic of “www” letterpress block and code software window (to display web examples)
  • Code to display twitter and blog on home page
  • Buttons that look like antique typewriter keys (including rollovers)
  • Thumbnails of portfolio examples
  • Logo
  • Descriptive text for all portfolio examples
Portfolio examples
Web
  • Salon Halo
  • Pacific Beach
  • Pollen Allergy
Graphic Design
  • Pierce County Library System (PCLS) mouse pad
  • Retractable Banners
  • Logo for bag
Print
  • PCLS PCReads cookbook giveaway
  • PCLS PC Reads event brochure
Interactive Media (swf files)
  • Mesa Verde
  • Glass museum slide show
  • Louisiana cookbook
For the purpose of structuring your website portfolio pages, list the categories of work you will show. (for a Photographer, for example, it may be portrait, product, sports photography categories).
  • Graphic design projects
  • Print projects
  • Web examples (school work)
  • Interactive Media examples (school work)
Write a 200 word concept statement based on the user, your persuasion, navigation and the assets.
Concept Statement:
I’d like to create a professional-looking web site that attracts the viewer and encourages them to explore my portfolio and ultimately contact me for work. My mood board reflects old letterpress wood blocks and type which is reflective of my typesetter beginnings. I’d like to express my experience but have a look that is “hip” with today’s styles. The graphics and portfolio examples will convey to the user that I have knowledge and or experience in each field of work: web design, interactive media, print and graphic design. My potential user will primarily be potential employers and freelance opportunities, secondary user will be colleagues who will offer recommendations and referrals. The site will mature as I progress through my Bachelor’s degree in Web Design and Interactive Media at the Art Institute of Seattle, reflecting each course objective.

My assets will include graphics and images that I’ve created as much as possible. My portfolio examples will be work (graphic design and print) and school related (web design, coding, and interactive media). I will alter my current logo to reflect the current mood board for this class. I will be researching tutorials to create letterpress effects for my logo, images and graphics for this site.

Old School Typography @ Walton Graphic

Sunday, July 24, 2011

Week 2 Reading Response

Chapters 3, 4, 5: “Don’t Make Me Think” by Steve Krug

I enjoy reading this book – it’s so short and concise. I wish all my courses had books like this one!

Chapter 3 list five important things to make sure a user sees when “whizzing by”:
  1. Create a clear visual hierarchy: the content on the page should clearly show relationships. A good visual hierarchy saves the user processing time by organizing and prioritizing. Pages should have three traits:
    Prominence
    : if it’s more important – make it more prominent by using size, bold or color.
    Grouping
    : If they’re related, group them together. Display it under a headline, use the same style, or put them in a defined area.
    Nesting
    : sectioning content, one under the other to show this is a grouped category.
  2. Conventions: embrace conventions. A clear example was given with the newspaper analogy: without ever being taught, we can read a newspaper. The convention of scanning and finding headings, captions and photo credits comes easily and it’s universal - it breeds familiarity. It you’re reinventing the wheel make sure it is clear and self-explanatory or adds value.
  3. Break up Pages: allows users to decide quickly which to use and which to ignore. I liked the $25,000 Pyramid examples: “Things I can do on this site;” “Links to today’s top stories;” “Products this company sells;” “Things they’re eager to sell me;” “Navigation to the rest of the site.”
  4. Make it obvious what’s clickable: don’t squander “the limited reservoir of patience and goodwill that each user brings to a new site.” Make links obvious and avoid making other content look like links (through the use of color, size, underline, etc.).
  5. Keep the noise down: don’t have background images competing for attention; avoid using lots of things going on at the same time.

Chapter 4 was very short but noteworthy. It focused on the number of clicks to use on a website. The author recommends not focusing on “how many” clicks but instead think “how hard is it?” Is the user on the right scent when he/she navigates through the web site? Think in terms of two types of hierarchies:
Wider Site = more categories, fewer levels, fewer clicks
Deep Site = more levels, more clicks, fewer options at each level

Chapter 5’s “Omit Needless Words” struck a chord with me. I worked at an in-house graphic department for a library. The librarians loved words and our department’s goal was to reduce the text for print and web. Get rid of half and then half again. Be ruthless. It’s necessary for so many reasons: reduces noise, makes useful content more prominent, and makes for shorter pages.

“Happy talk and instructions must die” was an “aha” moment for me. For another class project I’m creating a web site for a non-profit group that uses “Happy talk” – introduction text that conveys no useful information. The mission statement is important but doesn’t need to be prominent on the “Home” page. Pointing out what makes them viable to the community would be more useful and interesting. Eliminate instructions, everything should be self-explanatory – if only the majority of web sites followed this convention, there would be far less aggravated users in the world!

Friday, July 22, 2011

Tuesday, July 19, 2011

Sunday, July 17, 2011

Week 1 Reading Response

Summary of Intro, Chapters one and two: “Don’t Make Me Think” by Steve Krug

When I read in the Preface that the author’s goal was to keep it short, I thought it was an admirable goal but doubtful that it could actually be done. But I have to concede that the author has done just that. Not only has he kept it short but he talks in “normal” language – not a bunch of formal English where you have to look up every other word or scan backwards for the reference. I also enjoyed the humor and up-to-date references throughout the text and in the footnotes.

In the first chapter Krug states his first law of usability – “Don’t Make Me Think.” An image of my husband grumbling at the computer when searching the internet comes to mind and makes me laugh! He just wants to click and have the answers magically appear, as if the web designer knows exactly what he’s thinking! Eliminate the questions marks is truly apt in this situation. Make the site self-evident and don’t make the user think; and, in my opinion, the fewer times a user has to click to get to their destination the better.

Some of the points that stuck out to me and worth noting were:
• People don’t like to puzzle over how to do things
• Why should I think about how I want to search?
• If you can’t make it self-evident, at least make it self-explanatory
• Web pages need to work their magic at a glance
• Design as if it’s a billboard going by at 60 mph
• First reasonable option – example of a fire chief, who takes the first reasonable plan that comes to mind, examines it for problems, and not finding any, goes with it.

My Portfolio Mood Board

Saturday, July 16, 2011

Tuesday, July 12, 2011

Hotlinks to Portfolio Websites

A nice photography portfolio interface  http://trevorclarkphoto.com/portfolio/action

Makes me go, "Hmmm.... " has potential, but something's missing  http://www.ayushsaran.com/

Like, clean design, especially like icons on home page that lead to examples of work  http://www.shannonmoeller.com/

Interesting layout, nice color scheme, like the flickr widget at top  http://www.jeffsarmiento.com/portfolio/

Nice website examples  http://www.simpleart.com.ua/en/portfolio/

New to blogging

I've started this blog as a requirement for IM231. Stayed tune (lol)!