Week 10 – Final Project – "OurStories" online oral history December 14, 2009
Posted by sunagurol in Uncategorized.add a comment
Week 10 – Journal Summary … or what did I do in my Theories and Practice in Interactivity class December 14, 2009
Posted by sunagurol in communication.add a comment
Rather than do a progressive, class-by-class summary of the course, I’d rather do a high-level synthesis of what was learned:
Some lessons:
1. Good design doesn’t just happen.
2. Design takes work. Lots of it.
3. Usability testing should not be an afterthought… but it often is.
4. Typography is more complicated and meaningful than you realize.
5. Simplicity is complex. And hard to do. And powerful when done right.
6. Innovation is often a long, collaborative process.
7. While these are novel concepts, no one should ever use mice as fuel to run a television or have a poo lunch box (um, ew.)
In addition, the following were new to me:
Typography – I have never studied typography. I loved going over the structure of a font in the class on Oct. 12 as well as the reading in Stop Stealing Sheep by Erik Spiekermann & E.M. Ginger.
Heuristic evaluations - I’ve never done a high-level heuristic evaluation before and appreciate the suggestion by Ken to look at Media Space and how it might be improved. Using Jakob Nielsen’s 10 Principles for Interface Design, I reviewed Media Space’s home and 2nd level landing pages, as well as the navigation.
Mobile wireframe – I had a pretty deep experience with wireframes, but I’ve never had a chance to create a mobile wireframe before. It was a fun exercise to work on a striped down, simplistic version of a website, that is hampered both by amount of information that can be reasonable on a mobile site, tiny screen size and a variety of devices.
Task-flows – This way of displaying a task was new to me. I used it to map our the task of moderating a video for our final project and was able to identify problems with our assumptions. It’s a great tool, though I would like to know the meaning of the different symbols and shapes.
Service Envy - This concept is also new to me. The quote by Bill Moggridge “Our major challenge is to enable people to express who they are through the use of services instead of through ownership of things” helped clarify the concept. I enjoyed the assignment on how to create service envy for AT&T application developers by trying to understand why Apple and Droid might be more appealing and the psychological ways of trying to get people to join the club.
Simplicity – Maeda’s concept of simplicity is very powerful. Though he may be a little too in love with his visual metaphor of the word “simplicity,” his theory on how to obtain simplicity and how simplicity makes a design easily usable and understood is extremely elegant.
Games – I enjoyed learning about game theory and the different categories of games- Agon (chess), Alea (roulette), Mimicry (dressup), Illinx (snow angels.) (Would a game of “tag” be a mix of agon and illinx then?) I would have liked to have learnt more about how design is different for games (compared to a static website, for example), especially with interactive sites such as Second Life.
Innovation – the Moggridge book interviews individual or teams of innovators and reviews the computer technologies they have designed and engineered and discusses the impact of the design and/or the individual themselves on the timeline of innovation. One thing that stands out is how there is rarely a “Eureka” moment that solves the whole problem, but much innovation is a long, detailed process with a variety of collaborators or competitors working in parallel.
Other items to note:
Readings – The readings chosen for the class were first-rate and interesting. I especially enjoyed The Laws of Simplicity by John Maeda and Designing Interactions by Bill Moggridge. I will also use the case study of the CDC website redesign in Measuring the User Experience by Tullis and Albert at my work. While I appreciated the thoughts behind Designing the Obvious by Robert Hoeckman, he referenced the Backpack site so often I wondered if he had stock in the company.
Speakers - Thank you for bringing the Curt Keerfman and John Davis to talk about branding and usability. I think it gave the class fresh perspective as well as opened many eyes up to the necessity of branding and the power of usability.
Final Project – Amy, Helen and I are all very excited about our final project, which is the proposed website “OurStories, online oral history.” And personally, I’m pretty pleased with my wicked site map.
Final thoughts:
While I’ve been involved in design as a web producer for many years and have a long history with site maps, wireframes and branding, and currently supervise a designer as well as web production associates, I learned a lot about design and design theory in this class. I actually feel more comfortable in my knowledge of online design.
Week 9 – Final Presentation December 1, 2009
Posted by sunagurol in Project, classroom, communication, oral history, video.add a comment
“OurStories” online oral history project by Suna Gurol, Helen Pitlick and Amy Rainey.
Link to the full presentation:
Week 7 – Service Envy November 16, 2009
Posted by sunagurol in Uncategorized.add a comment
AT&T Developer website
Our assignment this week is to review the AT&T Developer website (aka “devCentral”) http://developer.att.com/developer/ and determine ways to create “service envy.” DevCentral was specifically created for developers to create and market applications for phones distributed by the AT&T mobile network. Peer developer sites used for comparison are Motodev (http://developer.motorola.com/docstools/motodevstudio/) which is for developing applications for the Android system and Apple Developer (http://developer.apple.com/) for developers creating applications to be used on Apple hardware. (Other contrasting websites include Droid phone website http://phones.verizonwireless.com/motorola/droid/#/home and the Intel Rock Star campaign http://bruceeric.wordpress.com/2009/05/14/intels-rock-star-campaign/.)
Service envy: We can think of products as serving two basic needs: to perform the function they are engineered to do, and to confirm and communicate the owner’s set of values. The second function is crucial. Products help us identify ourselves through a complex product and brand language. If we want to make people desire services more than products, then services will also have to communicate with these values, and we have to create services that help people tell one another who they are. Our major challenge is to enable people to express who they are through the use of services instead of through ownership of things. We must create service envy. (Moggridge, 2009)
This project is to identify ways that can help a developer want to confirm and communicate the owner’s set of values. In short, AT&T developer site needs to look cool, so that the cool kids (developers) will want to come over and play (make applications.)
According to the background materials devCentral is a website that has a hodge-podge of services and applications that have been cobbled together over the years. There is little AT&T branding, besides the logo. At first glance, from a non-user is that the site is pretty generic and, except for the AT&T logo in the upper-left, there is little to distinguish it from any other computer-oriented website. It could be selling software, hardware, or services.
Apple Developer website
In contrast, while similarly spare in design, the Apple Developer siteis highly branded and clearly Apple. In fact, one person’s expressed in class last week, when asked what the first things that came to mind about this site when they saw it was “it looks very Apple.” Apple used specific images to make clearly defined audience paths- iPhone developers, Mac OS developers – and even called out specific developers for Snow Leopard.
By creating these specific paths, they accomplish two things simultaneously – 1) they assist the developer to start immediately down their path towards developing their project and 2) through careful language, they make provide a welcoming, club-like atmosphere. “Come on in” it seems to say, “and join in the fun. But first, would you like coffee or tea?”
The step-by-step process seems clear even for a lay person to follow (1. Develop, 2. Test, 3. Distribute.) In addition, Apple has also provided video examples of what developers have created using their software, which is inspiring and reassuring to would-be developers.
Motorola's Developer website
Motorola also makes use of graphics on the home page to immediately explain what this web site is supposed to accomplish. They show an image of the Android phone, they have a cute little cartoon robot (android) who is a graphical display of the steps listed directly below these two images – 1. Get started, 2. Develop and 3. Distribute. In addition, a lot of the links to important tools that a developer might need (Motodev Studio for Android 1.o for one) are placed high on the page with their own graphical treatment. Also, this was the only developer site that seemed to include social sharing.
In contrast, AT&T has no highlighted tool. Events and awards dominate the main graphical image on the page, which speaks more for the corporate goals than the developer needs. AT&T could take a page from the Motodev site by highlighting some of their most popular products or brands and identifying their developer studio software on the home page (for example, Nokia, iPhone, Palm). They could redesign the navigation so that the lower-level items were easier to see. They could include some nice, appealing-to-the-user/not clearly stock-photography graphics. If they focusing their design on the developer, rather than on AT&T, they will create service envy.
Assignment Week 6 – Task Flow Diagrams & Use Case November 9, 2009
Posted by sunagurol in Media Space, Usability, design, wireframe.add a comment
For this assignment, we useD Media Space (http://mediaspace.washington.edu/) as the website of reference to diagram task flows and create a use case. I will create two task flow diagrams of how someone would add a “friend” or add a member to their network. The first diagram will show how this task is accomplished in the current functionality; the second is proposed improved version.
TASK FLOW DIAGRAMS
Current version:
Media Space task flow for adding a friend to a user's network - CURRENT VERSION
Improved version:
Task flow diagram for Media Space for adding a "friend" to a user's network - PROPOSED IMPROVED VERSION
USE CASE
The following is a use case for the proposed improved version of adding a friend to a user’s network on Media Space.
STEP 1.
User logs into Media Space website.
STEP 2.
User is taken to the Welcome screen, where there are various navigational options. One of these options is the Members tab.
STEP 3.
User clicks Member tab. Members tab has various search and filtering options:
- General search – Primarily used for searching user’s names, but also can be used to search for classes, groups, topics… and anything that is a searchable field from any member page.
- Class list – A list of current classes. This list changes per quarter.
- Group projects list – A list of various group projects from the classes.
- Topics/Interests – Based upon interests identified on member page.
STEP 4.
Decision time! User decides either to search or filtering with the various options for a member’s name.
STEP 5.
Search or filter result displays lists of names, as well as option to add each person as a “friend.”
STEP 6.
User clicks “Add a Friend” link.
STEP 7.
Message is displayed to user – “This personal has been added to your network.” New friend name is now displayed on user’s list of friends.
Assignment Week 5 – Project Proposal November 2, 2009
Posted by sunagurol in Project, multimedia, oral history, video.Tags: multimedia oral history, oral history project, video
add a comment
Project Proposal
Team: Amy Rainey, Helen Pitlick, Suna Gurol
Background
The origin of our project came from an idea Amy had to use multimedia to document her grandmother’s history. This reminded Suna of an oral history project for high schoolers she knew about. After productive brainstorming, our group expanded the idea to create a web site that would help people create and find oral histories to use in student projects. This is an idea we’re all passionate about and interested in. Plus, this project encompasses several topics we cover in MCDM, including online storytelling, video, interaction design and media literacy.
Our Idea
Create a nonprofit educational website that helps people create and share multimedia history projects. Our mission is to help people document family history and stories. The site will offer resources for documenting stories and serve as an online community for these projects. Students will use the site to gain knowledge about how to create multimedia history projects and to share their projects online, as well as watch and learn from other projects.
Possible names
Hidden Histories
The Multimedia Storytelling Project
Preliminary wireframe of the home page:
Hidden History home page wireframe
Preliminary wireframe of a video project page:
Hidden History sample video page wireframe
Why?
As older generations pass on, it becomes increasingly important to preserve their stories so we can learn from and remember those eras of history. Our site will help people document and share important stories that might otherwise go untold. It’s easier than ever to create and edit videos, audio recordings and slideshows. We want to help students use inexpensive technology to tell their families’ stories.
Based on our research, this project will fill an importance niche by providing a multimedia platform for documenting and sharing historical stories. There are other sites that feature oral history projects, but we haven’t found a site that offers an online community for creating and sharing these projects. The focus will be on video oral histories, but projects on our site will include video, audio, photo slideshows and documents, allowing students to share any information they compile.
Scope
Our final deliverable for this class will be the concept for a website, with all the pieces in place for an engineering team to create a functional product. This will include the following components:
- detailed description of proposed project
- sitemap
- wireframes
- comparison/analysis of sites that offer oral history projects to show why ours is different or better
- usability plans for the web site
- list of features to include, such as tutorials, tags, links, suggestions and resources
- proposed partnerships with other organizations
Because we are starting from scratch and do not have the time to build such a complex site, we will not produce a live product at this stage.
Design Principles / Creative Direction
- Audience paths clearly defined
- Easy to use
- Not too school-ish
- Encouraging, positive
- History is fascinating, not boring
- Using multimedia tools like a Flip camera is fun and easy; anyone can do it
- Lots of clean, white space
- Ensure users aren’t overwhelmed by too much detail
Who is it for?
The project’s intended audience is secondary school, college and graduate students, as well as their instructors. Teachers often assign oral history projects to teach students how to conduct first person research; many students connect with their own backgrounds in the process. Because of the highly personal aspect of this content, we will also allow anyone, enrolled in an academic program or not, the freedom to create a profile and upload material in order to preserve and share their stories.
We want to ensure that our target audience is comfortable using the site, as creating video content can be intimidating for people who have never done so. With this in mind, we will include relevant tutorials on video recording and editing technology.
Assignment Week 4 – 1. Journal entry about poor usability October 25, 2009
Posted by sunagurol in Usability, design.Tags: Media Space
add a comment
A brief high-level heuristic evaluation of Media Space
A little background
Media Space is a online workspace built for the collaboration, innovation and communication of ideas through a closed social network. It is the brainchild of the Master in Communication in Digital Media program at the University of Washington. An alpha version launched in the spring 0f 2009; a beta version launched this fall.
High-level analysis scope/disclaimer
For the purpose of this brief evaluation, I used mainly used the home page, welcome page, top level navigation and the second-level pages to review the site. In addition, I only identified 1-2 problems under each heuristic usability principal.
About heuristic evaluations
Heuristic evaluations are quick and dirty usability evaluations that usually involve a small group of reviewers using a series of ten usability principals as a framework. The following heuristic evaluation principals were created by the granddaddy of usability, Jakob Nielsen.
______________________
Heuristic evaluation of Media Space – general observations
Media Space is clearly a work-in-progress. There is still a lot to do to aid the process of collaboration and to the identification of ideas. The founding designers/developers of Media Space worked hard to identify a different approach to social networking by putting ideas up front, rather than people. However, the process of collaboration is hard to follow.
I would like to note Media Space is an exciting and interesting concept, but a complicated one to implement.
Heuristic evaluation – using the ten principals for user interface design
Media Space home page
1. Visibility of System Status – “Where am I?” and “Where can I go next?”
The home page has the login information prominently displayed, clearly indicating that this is the action the user should do first. However, registration for new users is not as prominent and the assumption is that the user is a returning one. (Also, for this returning user, it was not identified that this is a “new” beta version of Media Space and that I needed to re-credential myself in order to login.)
The welcome text is clearly written and above the fold.
Examples of work helps the user understand what sort of collaboration and innovation projects have been done using this website. Sub-heads identifying these projects are unclear — for example, “SIFF-FinalStrategy” would be better understood if the header were “Social Media Proposal” or even “Media Proposal.”
Media Space welcome page
After login, the user is taken to a welcome screen with a large area to start the process of idea collaborating. This field almost appears to be a design element, and not a text field. A list of existing ideas or subjects would be helpful to start the process. This idea starter is a bit of a misnomer, since it appears to be mainly a version of microblogging with a 140 character limit. The display of ideas is by date and without any other filtering.
2. Match Between the System and the Real World
Since this is a new concept for a website, some innovation with terminology has to take place. “Ideas” are the product in this website, and collaborating or identifying similar ideas are part of the process towards making the website successful. On the other hand, having a section titled “pages” just invites confusion as to what could be — Additional web pages on the site? Your friends pages? Other favorite other websites (but… that’s probably what bookmarks are, right?)
- 3. User control and freedom
There is no “home” button to help with users should they lose their navigation. Clicking on the logo can sometimes boot the user back to the login page, rather than the welcome page (the site probably times users out for security, however, it is a bit startling to have to re-credential.) And the top level navigation stays static after selection – it does not identify where the user is in the site. By having rollover and status changes on the navigation (by changing color, for example), a user could more easily browse the site.
4. Consistency and standards
Some terminology is standard but some is not. For example, the first navigational link is “About Us”, which is highly standard on any website. On the other hand, the term “docollab” used for the fifth navigation label was unknown to me. Using the full term “Document Library” or “Document Collaboration” would make the section understandable.
There are too many top-level right navigation areas. The best number on a website should be somewhere between 3-6 and there are 16 on Media Space! Combining some of these would help reduce confusion by users on what to do and where to go next. One combination could be”Friends,” “Groups” and “Members” could be combined and certainly some of the media sections (photos, videos) in a different group to make the navigation more streamlined.
Also, it’s unclear if there is any underlying organization to the top-level navigation.
It appears that the lower-level navigation has some inconsistencies as well. Some of this may be the result of 3rd-party plug-ins that use their own navigation treatment (see the “Discuss” area of the site.)
5. Error prevention
One way to reduce error and confusion would be to provide explanatory text on the introductory page to each section, especially in this early beta version of Media Space.
6. Recognition rather than recall
Having the navigation buttons change would help with helping the user identify where they were at all times. Simple breadcrumb navigation would also be extremely helpful in helping users track their paths through the site.
7. Flexibility and efficiency of use
Despite the fact that the site is password protected and supposed to encourage collaborative work, contextual content does not appear. In the next version, have the user’s projects, blogs, updates from friends/feed show up on the welcome page right after login.
8. Aesthetic and minimalist design
The site is pretty minimalist as is and does not contain much of extraneous design elements. Increasing the size of the well or center section, would keep landscape-oriented photos from jutting underneath the right navigation.
The design uses a contemporary, appealing color and font. Layout is institutional and simple. Rotating photos on the home page of students, while showing differences in age and ethnic demographics, are all of men. Photography is not present on lower-level pages as part of the design.
The default font is small.
9. Help users recognize, diagnose, and recover from errors
Error messages are prominently displayed during login, along with plausible suggestions on the reasons for the errors.
10. Help and documentation
None found. Having a step-by-step instruction manual, as well as a written article on the expectations of the users of the site, could increase participation.
Conclusion
There are several easily-identifiable areas for improvement on Media Space. Suggestions would include improving the navigation top-and-lower level design, reducing and combining top-level areas, and adding explanatory text on top-level pages for each section.
_____________________________
Learn more about heuristic evaluations:
- Step by Step Guide to Heuristic Evaluation -
http://articles.sitepoint.com/article/heuristic-evaluation-guide
- From the granddaddy of usability, Jakob Nielsen -
http://www.useit.com/papers/heuristic/
Assignment Week 4 – 2. Design concept for an improved classroom/learning experience October 25, 2009
Posted by sunagurol in classroom, communication, design, microblogging.1 comment so far
My suggestion for improving the classroom learning experience would be integrating the microblogging service Twitter as a tool to encourage questions and stimulate conversation inside and outside the classroom. I created the following diagram, using a hypothetical character “Student X”, represented here as a cartoon, who is perhaps a little shy and having difficulty getting her question answered.
Diagram of how Twitter can be used in the classroom
This is how it could look in practice:
Assignment Week 3 – Wireframes October 19, 2009
Posted by sunagurol in design, mobile, wireframe.add a comment
The assigment this week is to create a wireframe, either for a new site or a revision of an existing site.
I decided to do wireframes for a new mobile site using a website that I help manage at work. I have no experience with mobile websites or applications, except as an end-user. I will show three tiers of wireframes – the home page, a 1st tier page (News Releases) and a 2nd tier page (a specific news release).
Existing site for Fred Hutchinson Cancer Research Center (http://www.fhcrc.org)
New mobile site for Fred Hutchinson Cancer Research Center (http://mobi.fhcrc.org).
Home page:
News Releases
Tier 2 – Single News Release:
News Release - Specific one
Assignment Week 2 – Good and Bad Design October 10, 2009
Posted by sunagurol in design.Tags: bad web design, crazy, design, good web design, interactive design
add a comment
Examples of Good Design
King Arthur Flour – http://www.kingarthurflour.com
www.kingarthurflour.com
This delicious-looking site is an excellent example of evocative and informative design. Warm and inviting in color and typography, the viewer is instantly seduced by the site by the image of a baked good right in the middle of the home page. The ingredients that make up any web page – palette, typography, design elements, branding, content – are assembled together here to create a strong, consistent design. In fact, the design basically resembles a bakery or even a baked good, which in itself is an advertising for their product. Navigational hierachy is clean and clear. What could have been a standard and pleasant static brochure site for King Arthur Flour, is instead bumped by by the subtle integration of interactivity and call for community on the home page and sprinkled throughout. Interactivity include a link in the highlights area in the middle of the page to a pleasant video of baguette baking, a link to their Twitter account, and having their blog be one of the top navigation links. In addition, the the precious upper-left-hand real estate given to their 1-800 number!
KEXP – http://www.kexp.org
www.kexp.org
The workmanlike website for the radio station kexp.org is several years old, but it is still effective. Kexp.org knows it’s audience well and keeps the content up high, even with the addition of fairly large and highly placed advertisements. It’s a highly structured and controlled website, laid out on a rigid, narrow grid and yet there is a lot of personality and spunk behind every module, with effective graphics, still spunky color palette, and clear, explanative content that draws in the viewer. It’s an oldie, but it still works.
Examples of Bad Design
The Weather Channel – http://www.weather.com
www.weather.com
Weather.com gets a thumbs down for incorporating it’s most important element on their site – the weather search box – into the banner advertising. Boo. In fact, the advertising and the content on this site can be indistinguishable. While this may be a matter for debate as to whether this should necessarily be a bad thing (can advertisers provide useful content?), it does mean that the user might have a hard time finding exactly what they want (such as the 10-day weather forecast for a particular area.) There is a lot of content on this site, and if it was better designed, providing additional content can be useful (see kexp.org above as an example of a site with a lot of content that a user might want to stumble upon), but instead of getting drawn in deeper to the Weather Channel (despite lots of video content) the site is difficult to navigate. They should do a careful analysis of their audience – travelers would be one for example – and figure out what would be the most effective way of providing value without provoking irritation.
Coffee Geek – http://www.coffeegeek.com
www.coffeegeek.com
Coffeegeek.com isn’t the worst site but a very typical small site. It suffers from the mediocrity of templated design. It has plenty of good, original content, but unfortunately this content is buried in an endless series of table cells, which look like advertisements. Discussion boards are hard to understand. Beveled headers are narrow, oddly right-aligned and and use a rounded typography so they are difficult to read. Based on the visual design alone, there is little trust by the viewer that there would be good content in this site.
Compare Design
A good example of old v. new (simplistic) design is for Holiday Inn Express:
Old: http://www.ichotelsgroup.com/h/d/ex/1/en/home
New: http://www.holidayinnexpress.com/hotels/us/en/reservation?optin=true
Internet craziness
And of course there is always http://timecube.com/, for your little dose of internet-crazy.
