Check out the new in-line video player on the Yahoo! Front Page. In the past, clicking on a video link opened up a video playing in a new window. The Front Doors design team redesigned the experience to open up the player in-line. Now, when a user clicks on a video link the player animates open and plays the video right there. When finished, the user can play another video or close the player.
Not only is the new user experience less disruptive, the video loads in a fraction of the time it did with the old player. To see it in action, go to http://www.yahoo.com/. Sometimes there is a video available on the first tab, if not, click on the video tab and you will see a collection of the most popular videos of the day.
August 27th, 2007
The new version of My Yahoo! is now in beta! Go to http://cm.my.yahoo.com/upgrade to upgrade. We have totally redesigned the product packing in lots of new features. We’ve also made the product much more efficient to use. Things that used to require multiple pages to perform can now be done in-line - without ever having to leave your page.
You can choose from over 2 million modules to display on your customized page. To add a module, click “Personalize This Page”. The “Extravaganza” opens (that’s what we call it internally) at the top of your page. You can browse, search and preview modules from the extravaganza. When you find one you like, simply click “Add”.
New Modules
We have added tons of new and redesigned modules to My Yahoo! The new portfolio module let’s you track your stocks, and the new movies module keeps you informed about new movies opening in your area. Many of the modules were designed by the My Yahoo! design team. Others were developed by other groups both inside and outside of Yahoo!
Open Modules
Use My Yahoo! as your aggregator of information across the internet. You can monitor your Facebook friends, check your Netflix queue, and keep track of your Yahoo! and Gmail inboxes.
Customize The Look of your My Yahoo! Page
Choose from over 40 different My Yahoo! themes. We are adding more all the time. Just go to Personalize this page and click “Change Color”.
June 22nd, 2007
Yahoo! Hotjobs
HotJobs was a New York based company acquired by Yahoo! in 2002. In 2004 I was one of the first HotJobs hires in Sunnyvale where the Yahoo! headquarters are located. HotJobs has two major products - the recruiter product, and the job seeker product. The recruiter product had not been updated since it was first built in the late 1990s. It was inefficient to use for recruiters, administrators and sales people. Recruiters have to deal with hundreds of resumes a day, administrators need to be able to add and delete users and change permissions, and sales people need to be able to put together quotes for their customers and efficiently handle billing. HotJobs decided to invest in a new recruiter platform in order to be competitive and grow the business.
March 22nd, 2007
As the name implies, User Centered Design (UCD) is an approach to software design that focuses on the needs of the end user. A user profile is developed that describes the target audience for the application. Next, typical usage scenarios are identified that represent the kinds of tasks users will perform. Design begins with low-fidelity mockups and storyboards, and progresses to interactive prototypes. User feedback is gathered at every stage of the process, and the design is iterated on until it meets the requirements of the end user.
User feedback is gathered via design walkthroughs, customer visits, and usability testing. Because design changes are applied to a prototype, iteration occurs very rapidly. The result is a prototype that serves as a interactive specification for the product.
User Centered Design enables the translation of market requirements into a tangible representation of the user interface early in the development process, before coding of the product begins. This website contains many examples of the application of UCD.
The Design Process
User Interface Design is a process of discovery. Not all ideas pan out. Sometimes a direction will appear promising early on, only to fall apart later when other factors are introduced. This is why it is best to start with “low-fidelity” tools such as site maps, flow diagrams and wireframes. Because low-fidelity designs are quick and inexpensive to generate, there is not a huge investment in them. It is easy to explore different ideas and iterate on them until you feel confident moving to the next level.
Our first example below shows an early attempt to map the organization of the user interface for a web authoring tool. Product Management had created a 150-page requirements document that included the features they felt would be necessary for the product to be successful.
It is not easy to digest a 150-page requirements document. In fact, the document was written by multiple people and contained numerous duplicate and sometimes contradictory requirements. The diagram below shows the distillation of the requirements into a high-level visualization of the organization of the user interface. It was iterated on many times and became a catalyst for clarifying product requirements, as well as the high-level user interface design.
Many questions can be answered using low-fidelity designs like this. For example; What features of the product need to be available in the primary workspace? How many different views are needed? What information should go into property sheets, wizards, palettes, etc?
Low-fidelity designs enable end-user feedback even at this early stage. Most software applications are targeted at tasks that users already perform by other means. For example, a new web-based application might be designed to replace a process that is currently being done using Telephone, Fax, or EDI. In such a case, there is already a process end users are accustomed to. To be successful, the new solution must work better than the existing process. Using domain-expert interviews, and diagrams like this, the existing process can be understood and documented. This information is fed into the design process. The high-level design for the new application can be shown to the same domain experts, and feedback gathered.
Next is an example from a different project that shows one of the alternatives considered for the basic organization and end-user flow of the product. Because the essence of the design was summarized on one page, it was very easy to understand and compare the alternatives.
Next, is an example of a flowchart that mapped out the detailed workflow for a web-based transaction application. This design was iterated on several times before all the major paths in the workflow were captured. Having the end-user workflow visible like this was a tremendous help getting everyone on the team focused. It helped to solidify requirements for, not only the user interface, but also the underlying data model.
November 2nd, 2006
