Final Project Components
This page contains a list of potential interaction components you may choose to implement. Please don’t limit yourselves to just the components listed. These examples are only intended to give you a sense of how to scope your interactions, and to get you thinking about other possibilities.
Data Collection Form
You may want to explore ways of easy ways of gathering data from your users. If you go this route, you will need to consider how you would:
- Design and implement a REST API endpoint for the data you’re collecting.
- Design and implement a web form.
- Ensure that you’re supporting data validation, error handling, and appropriate user feedback.
Examples
Tutorials
Data Visualization
Depending on the problem your project aims to solve, it may be appropriate for your website to communicate data to users through a data visualization. For example, you may want to display a line graph that shows how a user’s mood has changed over time using data that the user inputted through a form. Or you may way to display a map that shows the locations of community organizations in a given area. Data visualizations allow you to share information with users in an easy-to-understand format that highlights connects the users might not otherwise notice. Things to consider here:
- What kind of visualization will best convey the ideas you’re hoping to communicate (e.g.table, chart, graph, map, or network graph)?
- What interactions should the visualization support (filtering, sorting, toggling between different views, etc.)?
Examples
Tutorials
(tables, charts, and graphs)
User Profiles
By supporting user profiles, your interface can provide personalized content for each user. Profiles are sometimes utilized to allow users to store information, such as preferences or personal information like address and credit card number. Profiles can also be used to provide different classes of users with access to different features. For example, a website owner may want to add or edit content, but a website customer should not have access to these features. User profiles allow you to personalize your application to most effectively meet the needs of different users. If you go this route, please ensure that the following functionality is supported:
- Provide a login feature that allows a user to enter their credentials.
- Provide support for at least two users. The application should look different for each user (i.e. display personalized information such as name, stored data, etc). These profiles can be hard-coded (i.e. create a separate HTML page for each user that includes their personal information).
- The two (or more) user profiles should be personalized to the user, at a minimum by showing their personal information when logged in. If it makes sense for your application and tasks, the two user profiles should provide access to different features. For example, if you created user profiles to allow a website manager to have access to different features than a regular user, the two user profiles you create should support different features.
Examples
Tutorials
External Data Integration
Depending on the problem your project aims to solve, it may be appropriate for your website to allow users to interact with content from external providers. For example, you may want to view streams of relevant content that have been posted to sites like Twitter, Instagram, YouTube, etc. Many of these companies provide support for web developers to integrate their content into external websites in user-friendly ways. This would involve:
- Creating a custom UI / interaction with data accessed from another website. We have already seen many examples of this in class.
- Ensuring that the external data is integrated into your design in a seamless and usable way so that users can interact with the content as they would any other features.
Interactive Data Filter
Data filters provide a simple way for users to view a subset of a larger data set based on provided criteria. For example, when viewing a list of restaurants in a particular neighborhood, a user might want to filter the list to only view restaurants that are cheap or open right now. Data filters allow users to easily personalize their view of the data by providing access to criteria that they might care about, such as restaurant price or hours. Building a data filter would involve:
- Choosing a data set that your user would want to filter (i.e. it would be difficult for the user to find the data they’re interested in without filtering).
- Including at least two different criteria that the user can select to filter the data. These criteria should be helpful to the user given the user’s tasks and goals.
- Ensuring that data display (whether in list format, map format, or another format) updates to show only the relevant data when the user selects a given filtering criteria.
Examples
Tutorials
Social Interactions
Web applications that support social interactions between users provide valuable connective and informational experiences that bring people back to their sites again and again. Social interaction can be provided through public comments on website content or private chat interfaces that allow two or more users to share messages. When appropriate, these types of social interactions deeply engage your users and help them build communities around your web application content. Building a social component would involve:
- Supporting at least one type of social interaction (either commenting publicly on website content of privately chatting with one or more other users). Users should be able to write social messages, post them, and immediately see their messages on either a comment board or chat interface.
- Selecting an appropriate level of anonymity for your users given the goals of your application. Users may be completely anonymous (no names or handles are displayed), partially anonymous (users choose a handle that is displayed with all content they post, but this handle can be different from their legal name), not anonymous (users’ legal names are displayed with the content they post).
- NOTE: if you choose to make users either partially anonymous or not anonymous, we recommend that you also implement the User Profiles component described earlier in this document to allow users to create identities as part of your web application.
- Displaying social messages in an intuitive manner given your application, for example in you may wish to display messages in chronological order. If your users are not completely anonymous it should be clear which user posted which content.
Examples
Tutorials / Libraries
Note: You don’t have to use an existing widget or library for implementing commenting or chat! You can write commenting functionality in HTML and JavaScript relatively easily, and will then have full control over the design and interactions. However, these libraries and widgets may be helpful depending on your design.
Gamification / Rewards
Rewards can be a way to encourage users to interact on your system in particular ways. In web and mobile applications, rewards are often given in the form of points and badges which are given out in response to specific user actions of behaviors. Since points and badges are elements that have been adopted from video games, including these types of rewards in an application is often called “gamification”. However, rewards can take other forms as well; users could be rewarded with money or coupons, or could even set their own goals. For example, a user could decide that if she exercises every day this week, she will reward herself by going out to dinner. Building a gamification / rewards component would involve:
- Choosing at least one type of reward (points, badge, coupon, user-defined reward).
- Designing a set of rules for when the user should receive this award (e.g. if the user records that she exercised every day this week).
- Designing an interaction that communicates to the user when a reward has been earned. If your rewards are points or badges, you may design an icon that you display when that point/badge is earned. If your rewards is user-defined, you may display a message with information about the reward when it is earned.
Examples
Tutorials / Libraries
For tutorials on implementing rewards / gamification, see:
Custom Calendar
A custom calendar could provide a way for users to visualize temporal data in an interesting way, or to communicate upcoming events in a community. Your custom calendar could adapt either how events are created, or the way in which they are displayed to users. Building a custom calendar would involve:
- Design one or more views for your calendar that make sense given your users’ needs (daily view, weekly view, monthly view, events view).
- Your calendar should have good visibility; important information should be easy to find and clearly displayed.
- Design an interaction that allows users to add events to your calendar.
Examples
Tutorials
For tutorials on implementing custom calendars, see: