 |
|
Friday, April 27. 2007
My last two posts have centered around prototyping methods. Since I talked a bit about techniques, I thought it would be helpful to show an example in practice that we have used for a project I'm currently working on. A client requested a redesign and reorganization of their existing site. We went through the usual steps up front to pick their brain - content analysis, audience definition, creative discovery sessions, etc. Before we sat down with our trusty friend Visio, we thought it would be beneficial (and fun) to lay out the site with our trusty friends Pen, Paper, and Scissors. Based on our initial gathering of content ideas and audience definitions, Nam-ho and I organized the initial homepage design using an over-sized piece of paper and smaller pieces of paper that would represent the sections on the homepage (header, global nav, sub nav, blog, featured items, etc). This allowed us to quickly arrange the sections and throw out what we didn't think was a good fit. No coding time wasted! Here is an example of the paper prototype we designed:
 We actually sent this image to our client. Use your own discretion if you consider doing this - depending on your relationship with the client and your understanding of how they will react to a paper prototype. We were comfortable with providing our client this kind of feedback and thought it would be a good way to help them understand the process we went through. After some initial back and forth regarding positioning and layout issues, we moved into the digital wire framing process. All in all, it has been a very smooth process. The decision to go with a low-tech paper prototype model up front turned out to be a good one. One of the biggest advantages I noticed throughout the process was that it encourages experimentation. Using pen & paper as opposed to a software application gives you a great advantage of increased flexibility when laying out a page. If nothing else, it gave us an excuse to get away from our computers and play with scissors!
I would be interested to hear if any of you have had similar experiences using this method of prototyping.
Thursday, April 19. 2007
 One of our clients is taking a class on information architecture at USDA's Graduate School and as part of the class, he had to interview an information architect. So he sent me an email with a list of questions. In answering his questions, I was forced to think hard about what I do, and surfaced some of the deeper thought processes that I use when working on IA. I thought it may be helpful to share parts of the interview.
How did you find your way into the filed of information architecture?
I studied architecture in grad school, but one of my professors had a startup that specialized in building online communities during the dot-com boom years. I started out as a web developer, but soon, as the sites began to scale and become more complex, I started think about the user's experience, layout, and structure of the sites we were building out. I later found out that this was Information Architecture.
What type of training do you have in the IA field?
Like I mentioned above, I was originally trained as an architect.
When I first moved into information architecture, I wasn't sure how my education related to information architecture, but increasingly I am finding it relevant. First of all, architecture is about bring together and negotiating systems - structural, HVAC, enclosure while accommodating the function it needs to house, all the while reflecting the needs of the client. On top of that add culture, philosophy and art. This is what I do in IA - negotiate systems - database, content, layout, and design systems.
Secondly, architecture is about the human body. All architecture recognizes the human dimension and scale. A door knob needs to be mounted at a certain height. The windows open a certain way. The ceiling height is a certain height. Stairs need landings and have set dimensions for them to be comfortable. On the web, we call this usability. So my training in architecture made thinking about how users want to interact with sites almost second nature to me.
Thirdly, architecture is about circulation. How does a concert hall allow for the musicians, staff and concert-goers all to use the concert hall in an optimal way. Similarly, in IA, we have to understand who the audiences are, and how they want to navigate the site. This is navigation design.
Lastly, architecture provided me with a design sense: proportions, colors, layout, rhythm, white space, etc.
Of course, I also supplemented this background with books, articles, discussions, training and conferences which were IA specific, and a heavy dose of on-the-job training.
How do you describe to others, non-techies, what you do?
Increasingly I don't describe myself as an "information architect", but a "user experience designer". As such I describe myself as the "user advocate" in a project. The one person that stands up for the needs of the users. Clients can relate to that, and often see it as the reason they need to redesign their site - because their users are having such a tough time finding stuff.
In Lou Rosenfeld and Peter Morville's now famous Venn diagram that describes IA, it shows the information architect needs to balance Content, Context, and User needs. I'd say yes to that, but I approach things with a bias on how the User needs to access and use the information, and whether what we are designing are meeting this needs.
How do you work with clients to help them understand the importance of IA in terms of their sites structure when they are solely focused on flash and pizzazz of new technologies?
You have to communicate the "Then what?" factor. Flash and pizzazz is all fine - I am not against that, but once the users attention is grabbed, then what? How are they going to keep the users, and get them to do what you want them to do, whether it's sign a petition or buy a book. Therein lies the information architecture challenge. You may have a big sign saying how great your ski resort is, but when you get there, if you find that the parking lot is too small or badly organized, the ticket booth is crowded, the ski rental is a joke and the slopes are not very well maintained, do you think you'll return?
What do you see as some of the biggest issues moving forward in IA?
This is continuing challenge really - continuing to promote awareness that it's not about technology. Technology is the vehicle. It's about modeling human needs and designing interactions that reinforce and extend the way that people relate to each other and access information.
Wednesday, April 18. 2007
I love the latest UPS ads. They are simple and very effectively show what UPS does (and can do for you), which I am sure must be a highly complex operation behind the scenes for UPS. This Slate article really hits the nail on the head in terms of what I like about the ad: The whiteboard, the narration, the guy with the long hair, and the music by a band, ironically, called The Postal Service (who was also used in Apple ads).
I hate the UPS site they set up for the ad. It's slow and really does not capture the simplicity and energy of the ads. Most of the time I was at the site, I was waiting for the Flash components to load. The site closely replicates the ads, down to the long-haired guy squeaking his marker on a whiteboard.
Hello.
People don't come to the site because they have a crush on this guy, or likes the way he talks or doodles. They are there to find out more - information. Okay. We've seen the ad. We love it. Now give us information. In a usable way. In a way that gives us control to seek out information we need. Instead users are forced into a linear user-experience and endure an interface that looks like the ad and talks like the ad.
Once again another brilliant ad campaign, ruined by a mediocre the web site. Sigh
Friday, April 13. 2007
Breadcrumbs are not a recent concept on websites, but occasionally clients are unfamiliar with the term and their function. Reminded of that confusion while recently reading Jacob Nielsen's alertbox on that very topic, I thought I would shed some light.
A breadcrumb is that small line of text near the top of a web page that serves to remind the user where they are within the context of the site (see the red outline in the screenshot below). The reason why the name breadcrumb is a misnomer is because it does not, in fact, reflect the click path you've taken to arrive at this page. Instead, it represents where your current page fits into the overall navigation structure or hierarchy of the site. If the user wants to navigate back the way they came, most people will know to use the 'back' button on their browser.
I've observed many people during usability testing who rely on the breadcrumb as a way to navigate, and yet I'm amazed by the number of sites who don't provide it as a means of secondary navigation (think of a site off the top of your head and see if they're using breadcrumbs, you'd be amazed). The exception would be for relatively flat sites where there isn't much nesting of pages happening. Breadcrumbs would be less useful in that scenario.
Friday, April 13. 2007
Scrapblog is what Apple would have done in 6 months with iLife's iWeb.
It brings together photos from Flickr, movies from YouTube into a web-based photoediting interface, where you can create a scrapbook of photos, movies, on nice preset layouts and backgrounds. You can then post it like a blog entry to their site or to your blog, allowing comments to be posted. You can also export to MySpace, Flickr, to print, or make a book or DVD. Sweet.
Business model? " Google Buy Me!"
Thursday, April 12. 2007
UX Zeitgeist on Rosenfeld Media (Lou Rosenfeld's company - author of the "Polar Bear" book) combines input from the UX community with data from a variety of web services to generate an unequaled collection of UX books and related topics. UX Zeitgeist also profiles the trends that describe the field's evolution.
(via InfoDesign)
Wednesday, April 11. 2007
 During the NTEN conference that I blogged about a few days ago I went to a session with Charles Best of Donors Choose, which is a site that allows individual donors to fund small projects proposed by public school teachers. Lately I have been coming across a quite few of these, where a site links private donations with those who need financial support. I had lacked a term to call these types of sites, but of course the smart people I met at NTEN already had a term for these. Some of the terms that were discussed were eBay philanthropies, philanthropic marketplace... but my favorite was one that David Weinberger blogged following his plenary at NTEN: P2P philanthropy where P2P can mean peer to peer or better yet person to person (whether or not he coined it I don't know).
Here's a round up of some Person to Person Philanthropies I have come across lately:
- DonorsChoose: As mentioned above.
- DonorsCamp: Attesting to the fact that good social entrepreneurial ideas are contagious and subject to replication, CJ Foundation (CJ is one of many Samsung affiliates) in Korea lifted (interestingly, with willing consultation from DonorsChoose) the DonorsChoose model and transplanted it in Korea. The twist is that DonorsCamp actually matches one-for-one every donation that comes through the site.
- Kiva.org: Kiva links facilitates micro-loans to entrepreneurs in developing countries, "empowering them to lift themselves out of poverty." The payback rate to date on the loans are apparently 100% according to their FAQs.
- GlobalGiving: According to their site: "GlobalGiving connects you with grassroots charity projects around the world. We ensure that 85-90% of your donation gets to local project leaders within 60 days. It's a direct connection."
- Modest Needs: I heard Charles from DonorsChoose mention this site at the NTEN conference. According to the site, "Modest Needs is a registered charity that works to stop the cycle of poverty before it starts for low-income workers struggling to afford emergency expenses like those we've all encountered before: the unexpected auto repair, the unanticipated trip to the doctor, the unusually large winter heating bill."
- Propser.com: Where there are philanthropic and non-profit needs, there will also be for-profit needs. Prosper.com is where you can submit a business proposal and have you loan funded in whole or in part by many private lenders, which end up being a lower interest rate and/or larger amount than you would typically get from a bank.
- Cytogether: Cyworld is a wildly successful social networking site in Korea. It has a philanthropic counterpart where you can donate Cyworld's currency, "acorns", to your favorite philanthropic organization. The site is a little more than a P2P philanthropy in that it also is a community and links volunteer needs and opportunties. From what I can tell, most of the prominent non-profits operating in Korea seem to have a profile page on the site.
Interestingly (or maybe obviously) DonorsChoose, Global Giving, Modest Needs and Prosper.com all have investments from eBay founder Pierre Omidya's foundation - Omidya Network. Their portfolio page is a very interesting list, more like a who's who in web/technology innovation, which include many organization I have a personal interest in - Ashoka, KaBOOM! and Linden Labs (aka makers of Second Life).
Tuesday, April 10. 2007
 UIE has a great article from 2005 about 5-Second Tests: Measuring Your Site's Content Pages. In it they talk about giving the test subject a task, and then showing them a page for 5 seconds and share what they remember from the page. A good technique for testing paper prototypes on a whim.
Monday, April 9. 2007
 I attended the 2007 Nonprofit Technology Conference in Washington DC last week (April 5, 6). Here are some notes and highlights from the sessions I attended.
Session 1: What Technology Can Do for Your Mission
Interesting session with Charlie Brown (Ashoka), Isaac Castillo (Latin American Your Center), and Roberto Cavlcanti (Conservation International) presenting on the way each organization has been using technology to further their mission. Charlie talked about Changemakers (Forum One helped build their current site) and how putting their competition process online has allowed innovators at the periphery to participate. Issac talked about how creating an online database of their members has helped them focus their efforts and be more accountable to their funders. Roberto talked about the technology challenges of a scaling global organization with offices in many countries. (and how an investment in teleconferencing equipment paid itself off the first time in was used due to the saving in airfare)
My take aways: First figure our what problems need to be solved then find and use technology strategically to solve them.
Session 2: What Works with Online Community
Learned nothing new that I didn't know already about how to grow and maintain an online community. Well maybe that's a little too harsh. I did learn that there are 3 types of users that participate in online communities: goal-motivated user, socially motivated user, and curious learner.
My take aways: Not much, just that adding photos next to posts increases traffic.
Session 3: Fundamentals of Storytellig in Online Communications
This was an interesting session presented by Jonah Sachs and Susan Finkelpearl, our friends at Free Range Studios, the creators of The Meatrix and Grocery Store Wars. It covered the basics of good story telling - that you need a hero (Luke Skywalker), nemesis (Darth Vader), mentor (Obi-wan), oracle (Yoda) and an animal familiar (R2-D2), and how they used these elements to produce their flash-based campaigns. The nemesis doesn't have to be someone, or an organization. It can be something within people such as, in the case of global warming, indifference, ignorance, greed, laziness etc. The best stories sometimes ends up being stories that your users tell. However you have to provide clear directives for the users to tell their stories: "who influenced your most in school?" rather than "tell us a story about your school".
They also gave a step by step guide to storytelling:
- Identify your audience
- Identify emotional resonant themes
- Set the stage
- Choose your mystery / metaphor
- Choose your medium
The first question from the audience was interesting: "When should you not use storytelling?" I thought that Jonah answered this question well - most of what they were talking about was targeted towards the general public, however for academics or researchers who look for hard data or research, storytelling the information may not be appropriate. In short, taylor your message to your audience.
My take aways: Let your users tell the stories for you. Let your organization be the "mentor" of the story (Obi-wan), and the user be the "hero" (Luke Skywalker).
Session 4: Branding Through Websites: Building your brand from the first click
Laura Quinn (Alder Consulting) defined brand as, "your gut feeling about an organization", which is creatd by rational (e.g. what you do) and non-rational (e.g. people who hate the color red) factors. It is the external perception of your organization that is out of your control, but you can influence it. And whether you like it or not "you already have a brand."
Some exercises that get to your branding are:
- How are you currently perceived? (be brutally honest)
- How would you like to be perceived? (fill in the blanks)
- "XYZ organization is so __"
- "They are great at __"
- "They are different because __"
- Define answer for: (in 1 sentence)
- What do you do?
- Why does it matter?
- What makes you different?
Website are a powerful and often the only way to communicate to your constituents. You have control over the following factors that influence your brand on your site:
- Statements (tone, who are you trying to reach)
- Prioritization (of homepage content, navigation, teasers)
- Graphic design (establishes professionalism, credibility, audience-centricness, topic of the site)
- Information and functionality (provide clear evidence of service)
During the session, as an exercise, the audience was divided into smaller groups and given a site to figure out what they do and who they serve. Megan, our :>Refugees International client volunteered the site for a review by the session. The comments were interesting:
- "There is no clear sense that they are an advocacy organization, and not involved in actually humanitarian relief."
- "They need to tell their [success] stories"
- "'Where we work' and 'What we do' sections need to move up on the page [above the fold]"
- "There is opportunities to put video on the site"
- "The page looks busy, too much info, hard to know where to start"
- "There needs to be more statements about impact"
- "Audience track navigation maybe?"
- "Color palette is nice"
- "Good pictures"
My take aways: You have a brand whether you like it or not. How do you make sure it is an accurate reflection of who you are?
Session 5: New Approach to Social Change: Technology and the Social Entrepreneur
Great session with Steven Clift (E-Democracy.org), Charles Best (DonorsChoose.org) and Kris Herbst (Ashoka, Changemakers), about what it means to be a social entrepreneur, applying business practices and using technology opportunistically.
Steve provided better tips for maintaining a productive community than the session I went to yesterday. On e-democracy.org he has a couple of rules:
- Sign in with real name
- Posts limited to no more than 2 times a day (excellent policy for providing everyone a chance to participate, and avert flame wars)
- Stay within scope of local charter
- 2 warning equals a 2 week suspension
- Recruit 100 registered members even before you launch (seed communities before launch)
- Auto hide email quotes (so that posts are to the point and don't get long)
Charles had a fascinating presentation of how he started DonorsChoose.org out of frustration, when he was a high school teacher in the Bronx, with $2000 of his own money (while he was living at home with his mom). In the beginning, he also had his students handwrite letters to potential donors. Teacher have great ideas, but are unable to get funding, so DonorsChoose.org provides a platform for the teachers to submit proposals for school activities and for people who wish to fund a project to be "confident" about the project they are funding, by doing the background research for them, and providing follow up emails about the project. In Charles's words: DonorsChoose enables every public school teacher to be a social entrepreneur and every person to be a philanthropist
Donors can search projects by location, subject, grade, keyword etc. Interestingly "autism" is one of the highest search terms and despite conventional wisdom, more donors fund outside their locale.
One poignant question from the audience was, "Won't this encourage funding for education to be cut further?" Charles answered, "if that happens, we will all quit." He went on to say that a local politician who was visiting the site was outraged to find that some schools in his district didn't even have dictionaries, and caused him to act. Also surveys showed that those who donated were likely to show more interest in education issues.
The biggest challenge that DonorsChoose faces is scalability. Scaling operations means more staff, and actually studying supply chain management. Also scaling in to other states means maintaining a ground presence in each locale. Charles emphasized that "the internet is not enough."
I didn't take notes on Kris's presentation since I know what Changemakers is about, but I did ask him and the panel the question: "If you are about 'open-sourcing ideas', how do you feel about open-sourcing your platform?" Kris answered that they plan to open-source the competition module they developed in Drupal. But this is the dilemma that most social entrepreneurs must face. How do you let go and let grow an idea that you have so close to your heart?
My take aways: Social entrepreneurs are myth-busters. Muhammad Yunus (An Ashoka Fellow) broke the myth that the poor are not credit-worthy. Rapid developments and access to technology lowers the barrier and enables social entrepreneurs to tackle society's pressing problems.
Session 6: Using Online Social Networks to Build Buzz, Community and Support for Your Cause
Scott Goodstein (Catalyst Campaigns), and Heather Holdridge (Care2.com) talked about creating online buzz about your cause around new social networking sites such as MySpace and FaceBook. Heather summarized by saying:
- Be everywhere you can be, but prioritize
- Be prepared for the big moment
- Meet people where they are
Scott emphasized that it takes a lot of work to establish and maintain a presence in MySpace. Just like energy drinks (Red Bull, Jolt, Tab etc) or niche radio stations market themselves based on understanding their niche audience, so should your online campaigns be. Your organization needs to develop its "online persona."
My take aways: It is wrong to think, "If you build your MySpace page, they will come." It takes effort to understand who you are trying to reach and speak to them in their terms to create a wave of buzz.
|
|
Comments
Wed, 03.09.2008 09:53
FF messages
Sat, 02.08.2008 08:49
Thanks a lot for the help! This technique is really nice.
Wed, 16.07.2008 04:20
Nice article about placing and choosing right matter while desiging a web page.
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]