Overview

The user interface design and development process of SFnight started on Fall 2000 (e-Pub course), and was enriched with direct contributions from other three courses: usability & statistics, user interface design and digital documents. Besides the courses input, SFnight Final Project team developed in parallel user needs assessment focused on frequent nightlife consumers (survey) and nightlife players (survey and interview), several technology studies, business and competitor analysis and most of the current interface of SFnight.

The challenge of our design process was to be able to integrate those results and analysis into the interface design, specially when the business concepts still evolving, as we understand better the real users, their needs and expectations. In the Figure 1 we present a timeline of the project development process and the prototypes generated by several iteration with users. We started from a Hi-fi prototype, and at the Spring redesigned the site from scratch in a mix of 213 project (MySFnight) and Final Project (the overall consumer and network interfaces). Our decision of redesigning the entire interface also took into account our new capacity of better answer with our improved skills a better solution to users.

FIGURE 1: SFNIGHT FINAL PROJECT TIMELINE mouse over the image to learn about our development process

 

Goals of SFnight Interface Design

The main design concepts that lead us in the development of SFnight interface design were:

Add value to users, or usefulness: before thinking in technology by itself, we would first identify the needs and problems of our target audience. Our repeated question on our studies was: "would you use this", "would you recommend it to a friend". Of course that some features might be more appealing to some users. But understand who would use that feature, if the feature design would match their expectations, and how they would use it were some of the issues leverage by our user studies and testings.

Address their different needs and behaviors. Think different ways of navigation, browsing, searching, according to different scenarios design. A user can be a visitor, who needs more information about San Francisco, can be someone who wants to go to a bar close to the business convention building, or someone who would like to keep in track the best events in the city. Our challenge in this project was how to address so many needs, without overloading users with information.

A better time to performance a specific task (sequence of actions, e.g., browsing or searching information about bars), that is a translation of the understandability and usability of the user interface.

Easy information scanning: Atmosphere, music type, clientele should be shown first for easy scanning in search results before users can go any further. And since location is not as important as music type or event type for event search, therefore location become secondary search criteria, instead of first criteria. Two studies were important in reviewing our classification and priorities on search results: a survey with non-frequent users, and another survey deployed this semester with frequent users. Also by displaying those topics separate from the general description in the venue/event page we also were focus in facilitating the information visualization.

Information visualization: Consistence, easy to navigate, and intuitive. Properties that make easy to navigate, perceive changes, without much explanations or elaborations:

Grouping information: In the left-hand navigation bar and in the venue/event pages, we applied principles of grouping information, which means locating together similar topics and interests, separating by topics, color or lines things that should be associated.

Mapping: What, when, where for venue/event profile, matching the search structure, and helping users easily find the information in a consistent way; repeating the same structure in information organization of venue and event profile; organizing the players interaction (add, update, remove) at the left navigation bar.

Affordances for helping users better navigate and manipulate information objects. We choose orange as interaction color. All links, icons, are consistently orange. Our intended message was Go!, Explore!, Have Fun!. In our first E-pub prototype this was completely inconsistent. The only buttons that would be different would be MySFnight and the Network, to distinguish them and give them the personal sense.

AFFORDANCES

active

Constraints. The gray color of buttons when they are not active was chosen to give user feedback

CONSTRAINTS

active

inactive

Easy to use and understand: Rating venue/event description has to be super-easy, no more than one click. Network page is designed to encourage players to feed in their information and keep it up-to-date.

Consistent feedback to user actions should be clear, and bring alternatives to users. We developed a consistent way of presenting feedback to users after processing any action, or if user gets a null result. Interaction buttons do not disappear but become gray (see above Constraints); messages in blue and smile face tell user they succeeded or presents alternative:

OUR FEEDBACK Thank you for reading our report. Hope to see you in our presentation!

Consumer User Interface

The consumer interface design went through major changes following the usability testings and heuristics evaluations. We started with the study of the personalized areas for consumers on 213, and later integrated these parts into the homepage designed by our Final Project members.

The use of paper based prototype (lo-fi prototype) gave us flexibility to make changes, or even start a new design. The missing part of the lo-fi experiment was the lack of interaction feedback. We were not able to test it at this time of the process. The method provide a good understanding of the desired interactions, information and additional features. We explored important issues of the design as pointed out in the usability testing section and in the 213 personalization report.

Other three prototypes were created incorporating critically the input of our testers. Although we did not test all the consumer interface on 213 project, we could observe users as they interacted with prototype. See 213 personalization report for more details about those prototypes and their respective user testings, and the next section Usability.

The information architecture of the interface was redesigned completely in the final project to comprise the new information flow of the website, new features and user interactions. Although the concept of three general sections of epub project homepage was maintained, the navigation, labeling and searching systems were completely redesigned at this stage.

Navigation System. The main change in the navigation system was introduced by what we call "interaction area"[2], which comprises MySFnight, the Network, and View a List to E-mail. Our decision of not integrating them into the main navigation bar [1], was to providing to users the sense of interaction offered by SFnight. At this area users also can check their profile and log out, both activities related to the interaction [customization] process, also it can be access from any part of the site. This gives the user constant feedback about his/her status in the system. The general information about the company and the website is provided in the top right-hand area of the site [3]. At any part also the user can access the company and website general information. Intentionally we want to highlight the relevance of privacy to SFnight.

FIGURE 2: NAVIGATION SYSTEM

 

For a complete overview of the features and functionality's of SFnight, see Features and Functionalities.

Classification System, Browse and Search. Another challege in our development process was create a classification system that could be useful and understood by frequent users adn non-frequent users (specially visitors). The bar industry has a standard classification that match functionalities (restaurant bar, piano bar, Jazz bar/club, entertanaiment bar, etc) and also provide some sense of atmosphere. We deployed two surveys, and included open questions to better capture user's dimensions and needs. (see User Dimensions and Needs [PDF] from our first consumer survey). We provided ways of rating the relevance of those dimensions in the frequent user survey. Those results were translated in the our design decision of what should be displayed in the Specials for Nights, where we addressed special needs that are not usually available in the nightlife information-centrics websites, but were capture in our surveys. In our search and browse systems besides using the standard need of knowing when-what-where some event would happen, we also included event type to give a sense of atmosphere, the top information need shown by our surveys. In the search results we organized the information considering the relevance for potential users, specially the frequent consumers, trying to give them ways of making their decision where to go for outing from the search results, and for more detailed information access to venue/event pages. The decision of providing some topic in the search results also address business needs: we would like to motivate users to buy ticket by bringuing this functionality to the first level of results.

Network Interface Design

The players network interface was completely designed independently of course projets. At e-pub we had only some insights about features and services that we could provide for players (bar owners, promoters and djs). Before we went further in our network design concept, we decided to go through several interviews to better understand players's needs and problems. We also contacted a promoter with 12 years of nightlife experience that help us on discussing some of our doubts and concepts, as well arranged the interviews with players. Time constraints and location limited our user studies to needs assessment. The nightlife player network was a new concept, and distant from the usual testers available to our studies, we then decided that we would not develop the usability testings in the scope of this Final Project. For further development, we have planned an experiment with real users described at usability section.

Even with those limitations, the set of interviews, survey results and consulting provided us with enough feedback to create the network concept based in real needs. The same general principles and goals of our interface design were applied in the network. More than ever our intention was to make it simple and easy to understand. Since it is desired a good communication between SFnight.com and players, in the process of feeding information into our site, we also complemented the several interactions with a real contact with SFnight, even creating a hot line or special e-mail to solve any problem. In this way we hope to understand any limitation that some of the players might have to input their data into SFnight.

As the consumer interface went through several iteractions reveal design problems, we were able to apply similar solutions into the network interface design, such as feedback issues, labeling, forms design, etc.

The players network interface has three major sections, with several features to input information into SFnight system, or to provide the venue the add value of having information on SFnight (see also Figure 3):

The interactive section [1] at the left-hand navigation bar, where players add, remove, update a venue, an event or picture.

The venue at SFnight section [2], at the center, where players get to know about their input into SFnight. By seen their information, they can check any time if needs to be updated. We also included way of interactions, providing another entrance to perform the same task at the left-hand bar. At this area, bar owners can check:

The Venue information
Venue Events
Venue Statistics on SFnight
Venue Customers Reviews

Announcements and network news, an area to communicate SFnight news to a specific venue or players network.

FIGURE 3: PLAYERS NETWORK HOMEPAGE

 

The SFnight homepage also provide at the right-hand section a customized area for the Network. At this area the statistics and events are provided for one week, following the same idea of This Week at consumer interface.

MySFnight is also available to players, and it can be used to track their competitors or, as consumers do, to plan an event to go. As we said in other section of this report, the idea of tracking competitors came in one of our interviews.

In our design, we consider that a player is also a consumer, or might change its 'category' inside SFnight. This imply in giving flexibility to change their roles on SFnight: a promoter may become a DJ, and vice-versa. A consumer also may become a DJ or a promoter.

Personalization & Customization Features

The goal of any personalization is to achieve the optimal information to users, by creating an environment that would be appealing to users, which they would want to go back. Without personalization users would see exactly the same content, regardless of their interests. The SFnight purpose is to provide to nightlife consumers and players (users) specific information or features that would better match their needs and expectations (Figure 4).

FIGURE 4: CUSTOMIZATION

According to the Web data-measurement firm Nielsen/NetRating, people are more likely to remain loyal to a personalized portal and stay on the site longer, but most users don't actively personalize their preferences to enhance their web experience ("The Web's Still-Unfulfilled Personalization Promise", BusinessWeek, June 2000). Also, said this article "5.3 million unique users visited My.Yahoo.com, which is NetRatings' top personalized site, compared to the 44.8 million unique visitors to Yahoo!", which shows that personalization at information-centric website is more difficult since users would not take their time to make their selections if they are not buying anything.

To overcome users' resistance to register, regarding time, privacy and value add, and provide them with the best side of customization, SFnight analyzed competitor's approaches and some of the best practices regarding personalization. See more about these studies in the 213 course project Competitive Analysis and Notes about Customization and Personalization. In this last article, we present an overview of the technical differences between personalization and customization, and its implication to user satisfaction. From those studies the following topics were considered in our design decisions:

Users in control. A person may have different desires at different times. A nightlife consumer-user might want to invite some visitors to go out, based on their tastes and not on user preference. Personalization based on users clicks or browsing can result in an annoying experience for user, since the user is performing a specific task, for a specific time. For this reason, users at SFnight will be in control: they choose the music type, the event type and some keywords that will match with our Editor's choices.

No learning effort. Users do not want to learn how to use a system. They just want to use it. Amazon.com which is considered to be an innovation on personalization features, following their customer-centric business goal, tries not imposes extra work to users. However, for some new features, or when introducing them, it provides a huge page of information explaining the users what that feature is for, how to do it, privacy concerns etc. The goal of any personalization feature design should be to provide users an easy to perceive the feature value and its use. Although Amazon.com is a champion on customers, users might feel overwhelm with so many information, and feel that the system might be complicate to use. Also if users have to take much time to specify their preferences, they would easily give up, specially if the value is not clear or does not match user's goals. For example, in order not to improve site recommendations, Amazon imposes an extra work on the users. For some users, specially those who would like to be updated of the recent titles in their expertise are, they might take their time to remove items from their recommendation page. But for others, they would feel uselessness that requirements.

Anonymous versus personal identification. Users visiting a nightlife information web site might have desire to preserve their anonymity, and be able to freely check their preferences without personal identification. At the same time, there will be some exchange features at the site, such buying tickets, that would require a real identification. Most information-centric portals like Yahoo, requires personal information in order to users get advantages of the personalization features. MSN model provides user anonymity. How valuable are those features? In general is not clear how this can help users to have an optimal performance in their site experience. The value might be different for different users, and in different times and situations.

The Goals of SFNIGHT Personalization:

Sense of control. User would define their preferences by selecting their preferred bars, and would receive editorial recommendation based on them (customization). We are not providing recommendations by tarcking their clicks. (personalization)

Easy to understand. Users easy understand how to personalize, how to make changes, and what/where is the personalized area. Time for learning would make users give up to use personalized features. SFnight developed two usability testings addressing this issue, and redesigned the pages after each usability testing in order to make the entire process easy of use, easy to understand. Additional information also were provided, such as an overview of MySFnight.

Anonymous option. Users should be able to create their preference profiles without giving personal information. In this case user's address, real name, only should be required for transactions. At this stage SFnight is not providing any transaction. Address will be required only if user have participated of any promotion that implies sending a ticket or a T-shirt to user's address.

Flexibility. Users should be able to add and remove content from their personalized page in place, without having to go to their profile. Also to provide different context for getting personalized information. For example, a user might want to add a event that doesn't match with her/his taste to Your Picks calendar just because a friend is coming to visit. Or might change its preferences to get some reccomendation in a specif type of music for his/her friends.

Make value transparent. Make clear the benefits might help users to take their decision to use personalization features. We tried to make the benefits of sign up more clear by highlighting at the sign up page a short description, and by creating a general overview of the benefits of SFnight Network to the players network.

Not overcustomization/personalization. Users might want to be able to check other things and be updated in the new music trends, as well as might want to change their tastes with time and mood. The idea is together with customization preserve SFnight main page, and give the user a sense of the SFnight world. Our purpose will not be to cluster the user in their own world. That's why MySFnight is not an independent homepage.

From the marketer approach. With personalization SFnight also will be able to target ads to the right nightlife consumers-users, and match their personal interests, and be able to improve returns of their partners.

SFnight Personalized & Customized Features:

FIGURE 5: SFNIGHT CUSTOMIZED FEATURES

For a more complete description of the features, see Features and Functionalities.

Cost Concerns Privacy issues require an specific database for user personal information, and security policies and server will be necessary to protect users data. For using the customized and personalized features, users mostly will be able to maintain their anonymity. In special situations, the main basic data requested by SFnight will be:

User e-mail, to receive SFnight promotions and free tickets, as well optional newsletter.

User name and personal information, such as address, phone number, only if the user decided to buy a ticket, or wants to participate in some promotion. But not at the MySFnight registration process.

User demography is generalized and optional, only to better provide the personalization features, and understand our audience.

---

 

Important Issues for Further Development

Privacy Statement and Terms of Use: Privacy policy is an important issue on SFnight design. Although we will develop the Privacy Statement in the implementation stage of SFnight, several of our design decisions were took considering its implications on user security and privacy, such as:

Membership: to sign up MySFnight user must be 18-year of age to sign up this service, although we don't have ways of checking ones registration. SFnight does not ask user personal information, and only collect optional general information as a way to better service its customers. This information is explicit in the registration form. Also user have the right to be removed from SFnight database.

Newsletter is an optional service, and user has the right to be removed from SFnight database anytime.

At Subscribe a Venue Newsletter, users can sign up a specific venue newsletter. We discussed which would be the implications to users if the venue do not remove them, or if ones use another person e-mail to sign up those newsletters. SFnight decided for hidden the subscriber list from venues in order to better control users' privacy and right to be removed. This features will be further develop.

At "View List to E-mail", we discussed several design choices regarding the user needs of creating an e-mail agenda for friends's e-mails. We understand that an user has the right to provide his/her own e-mail, but not friends's e-mails. We postpone this discussion for further development.

Help: A web user interface should be easy to use. Help should not be a solution to overcome a poor design solution. We understand that this project will be refined with further usability testings and adjustments on both consumer and player user interfaces. Help will be written to provide more interaction between SFnight company and customers, and not between SFnight and users, since we hope to overcome most of the implementation problems.

New Design Solutions: At the consumer side, we plan to develop more studies of calendar solutions that could address the several interactions proposed in our design. Also the "Add to a List to Send to Friends" we plan to transform it in a more competitive tool.

Design Elements: We plan to develop further graphic design solutions to buttons and improve our icons. The buttons will be customized, so they can better match the overall site graphic design.

Usability Testings, specially on players interface: We have tested specific areas of the current prototype related to consumer interface. We plan to refine our design solutions by developing several other experimental testings, and compare design alternatives. And for the network interface, we decided to do usability testings in a more advantage stage of the project, even with the implication of changing the design and code. Since the network features are completely new for the potential users, using a more interactive interface would give us a better feedback and users would not be focus in the "unfinished" aspects of a lo-fi prototype. See Further Development at Usability section.

Browser compatibility, Fixed-Relative Fonts, Page load: In the implementation phase we plan to refine the design to better address those issues. We are aware of the implications of size fonts to accommodate user needs, and at the implementation phase we plan to use relative size, and test the interface in several machines and browsers. Also, the current page load will be optimized. The intensive use of tables behind the scenes affects the page load, that will be corrected with a review of the design and html codes.

More Marketing-oriented Messages: We will review all messages (and the lack of messages) in the site to address a better communication with our potential users. The messages should help to 'sell' SFnight website to nightlife customers and players, and highlight the value of its competitive features.