May 02
Permalink
Apr 19
Permalink

Heuristic Evaluation of Calendar Interface

» Oops, I didn’t mean to add that.

Description:

The current system lacks a convenient undo feature. If a user accidentally adds an event that he/she does not plan to attend, there is no way quick way to remove it from his/her RSVP list. The only way to remove it would be to manually navigate to the corresponding personal calendar, locate the event within the calendar, and then delete it.

Heuristic Violated:

Error Prevention

Solution:

One possible solution is to provide a confirmation message at the top of the screen whenever a significant transaction is made. It would provide an option to undo whatever changes that had just been performed. A significant transaction would include the addition and deletion of events or calendars. It would not include the editing of minor details of an event. If the option to undo every little thing was given, this feature would become more of a nuisance than a convenience.

» How do I get back to today?

Description:

In the main window of our application users will be able to toggle between daily, weekly, and monthly views via tabs located along the upper edge of the window. In our original mock-up there was a fourth tab labeled ‘Today’. Since the syntactical meaning of the ‘Daily’ and ‘Today’ tabs led users to envision the same view, there was major confusion as to the purpose of including both. When we first designed this window we wanted to provide users with, not an additional view, but an easy way to jump back to the current day within whatever view they were in.

Heuristics Violated:

Providing Shortcuts and Marked Exits

Solution:

Rather than being a tab, it would be a visually discernable button beside the tabs. When clicked, it will jump the user to the current day within the view.

» Time conflict? Where?

Description:

When adding events to a personal calendar, the system does not provide any feedback to the user as to whether or not the time slot has already been filled. The user may easily schedule a group meeting and leg lifting session for the same time if he maintained two separate personal calendars.

Heuristic Violated:

Providing Error Messages and Feedback

Solution:

The system should warn the user whenever he or she tries to add an event to a time slot that has already been allocated to something else. It would provide an error message displaying the name of the conflicting event along with options to ignore the conflict or reschedule either event.

» All I want to do is schedule a group meeting for 5pm this Friday.

Description:

When a user clicks on a day within the monthly view of the application a window pops up prompting him/her for various details of the event. The form is rather densely populated with options and can become overwhelming to an inexperienced user.

Heuristic Violated:

Providing Simple and Natural Dialog

Solution:

By default, when a user tries to add a new event, it should only prompt the user for the name, time, and location of the event. If he/she wants to add reminders, repeat the event, change privacy settings, or invite guests, there would be an ‘Additional Details’ button that expands the window to provide further options.

» I just found this event. How do I RSVP for it?

Description:

After performing a search for a specific event and locating it, our current system allows users to drag it from the search results into their RSVP list. This was a problem since none of the other panels allowed for inter-panel interactions. Thus it was unintuitive to drag items from one panel to another.

Heuristic Violated:

Providing Consistency

Solution:

Rather than having users drag items from the search panel to the RSVP panel, there would simply be an ‘Add’ button for each search result.

» This class is held at the same time every Tuesday and Thursday. Is there a way for me to add it just once?

Description:

When adding events, our current system does not account for recurrences. If an event were to repeat twice every week at the same time, the user would have to manually enter the event twice every week. This would be an absurd thing to ask of the user.

Heuristic Violated:

Providing Shortcuts

Solution:

There would be a ‘Repeat’ option within the ‘Additional Details’ dropdown when users add or edit an event.

» I’m new to this calendar application. Can you tell me what a CalPal is?

Description:

Within our application we use the term ‘CalPals’ interchangeably with friends. This is a system specific term that may confuse new users.

Heuristic Violated:

Speaking in the User’s Language

Solution:

We can either remove the term ‘CalPals’ entirely and use ‘friend(s)’ universally, or introduce the new term slowly and only use it when it is completely obvious that it is referring to friends.

» I added an event two weeks ago and forgot which calendar I put it in? What do I do?

Description:

Although we provide a search option for adding public events, there is no way for a user to search within his/her own personal events.

Heuristic Violated:

Minimizing the User’s Memory Load

Solution:

Attach a universal search bar above the main window that will allow users to search for events within any calendar while in any view.

» Is there a specific format this date needs to be in?

Description:

The current system has no robust way of designating a specific format for date input. The user could essentially have to guess until the input is validated.

Heuristic Violated:

Error Prevention

Solution:

When a user clicks on the field for entering a date, a mini-calendar should pop up allowing the user to make selections with a mouse rather than typing the date out with a keyboard.

» I am currently in the weekly view. Why didn’t the thumbnail in the top left corner change to reflect this?

Description:

The current system displays a thumbnail view of the calendar in the top left corner.  However, it is always in the monthly view mode regardless of the view the user’s main window is in.

Heuristic Violated:

Providing Consistency

Solution:

Allow the thumbnail to change dynamically such that it corresponds with the main window.

Apr 14
Permalink

Calendar Selection Menu

This menu resides in the side-panel of the calendar application, below the options menu and above the to-do list. The side-panel runs along the left edge of the screen and spans about 20 percent of the overall width. Users will have to option to collapse this calendar selection menu as well as drag it to a different location within the side-panel. The main purpose of this menu is to allow users to toggle individual calendars on and off. When a calendar is set to an on state the events of that calendar will be displayed within the main calendar window of the application. These events will be represented as color-coded blocks and their color will match the pre-defined color that is associated with its calendar. The toggling option will be implemented through checkboxes in which checked boxes represent the on state. All personal calendars as well as public calendars that the user subscribed to will be listed in this menu. I will refer to each listing as an item.

Items will be visually represented as colored blocks, similar to those used for events. Each block will contain a checkbox with the calendar name and an edit button beside it. Along the right edge will be 3 horizontal lines to represent a handle. User may use these handles to drag and reorder the items to their liking. They may also create folders and use them to organize their calendars. Items may be dragged into and out of folders. Each folder will be given a label, a checkbox for toggling all items within the folder, an option to collapse the folder, and a handle so it can be reordered. At the bottom of the menu will be a button for adding folders. When clicked a window will pop up prompting the user to enter a folder name. Once submitted, a new folder will appear at the bottom of the menu. Below is a mock-up of the calendar selection menu.

Calendar Selection Mockup

Scenario:

A college student groups his course calendars into a single folder and views the calendars one at a time to check for milestone deadlines.

Individual:

Bob is an undergraduate student at Cornell University who plays for a sports team and is a part of multiple project teams. He does not have the time or patience to maintain a planner or calendar but could greatly benefit from one. There are many deadlines every week for each of his project teams so the ability to view and manage each team’s deadlines independently would prove to be extremely useful.

Equipment:

IBM Thinkpad T43 Notebook with Windows XP

Scenario:

  1. Bob returns his notebook from its sleep state and fires up the calendar application.
  2. He had already subscribed to his course and practice calendars the night before but would like to organize them with folders.
  3. He clicks on the ‘Add Folder’ button along the bottom edge of the calendar selection menu which pops up a window prompting him for a folder name.
  4. He types ‘Schoolwork’into the text-field and hits the submit button.
  5. A new folder appears below all of the items that had been previously added to the menu.
  6. He clicks on the handle of his INFO345 calendar item and drags it into the newly created folder.
  7. He does the same for the remaining 4 course calendars he had subscribed to.
  8. He creates another folder and names it ‘Practice’.
  9. He clicks and drags the Baseball calendar into this folder.
  10. He is curious as to how his workload will look like for each of his classes over the next week so he uses the checkboxes to toggle each of his course calendars on and off.
  11. Once he is done assessing his schedule he closes the application and puts his notebook to sleep.

Mar 31
Permalink

Google Calendar

Description

Google Calendar is a free web-based calendar application for anybody who has or signs up for a Google account. Its target audience includes those who need help scheduling and managing events. Since all data (i.e. events and contacts) is stored externally on Google’s servers, users can access their calendars from anywhere. Consequently any hardware failures on the client side won’t affect their data as well. Its AJAX driven interface resolves many usability issues involved with online services. Users can drag and drop items or add and delete events dynamically and do so without refreshing the page.

Usability Components:

Learnability

  • Adding an event is extremely straight forward. Let’s say a user is in the monthly view of a calendar and wants to create an event on the 24th of the month. He would simply click on the box for the 24th and a dialogue box would pop up prompting him to enter an event name. If he decides to provide additional details he can hit the ‘edit event details’ link which would bring him to a separate interface.
  • The interface for editing event details is rather densely populated with options. However, all the fields are well labeled and points of interaction such as buttons, checkboxes, and drop down menus are extremely intuitive. Even the date-selection field is implemented through jQuery’s datepicker which provides users with a calendar menu to choose from. At the same time this provides for excellent sanity checking from the developers’ point of view.


Efficiency

  • As stated earlier, adding an event is as simple as clicking on a day and entering an event name. The application does not fuss over the times, locations, and other trivial details of the event. The process of adding and deleting events can be done with very minimal key strokes.
  • From the weekly or daily calendar view, users may click and drag over a time range to create an event. This is much faster than selecting start and end times from a dropdown menu.
  • The application supports multiple calendars allowing users to tab between class schedules, practice schedules, and social schedules very quickly. Since events can be separated by categories, they can be found faster.


Memorability

  • Since users are able to use the application with ease the first time around and probably won’t be worse off any following time, they will be able to reestablish proficiency relatively quickly.


Satisfaction

  • Users who are unfamiliar with dynamic web applications may at first be unaware of the draggable, droppable, and resizable items. For example, once an event is created, it will show up as a block within the calendar, displaying when it starts and how long it runs for. Users may grab the top or bottom edges of those blocks and resize them to a new height as they would with a window. This graphical representation and method of changing event lengths is far more intuitive than using dropdown menus with all the possible times.
  • Google checks for trigger words within emails such as ‘meeting’ or ‘appointment’ automatically and prompts users to schedule events on their calendars. This is a small but great feature adding to the user experience.
  • Users may export and import calendars to and from other calendar applications such as iCal and Outlook. They may also subscribe to public and friend calendars. This cross compatibility and subscription service eases syncing problems and allows for greater visibility within a network.


Errors

  • With these dynamic items, however, come several issues. Let’s say a user wants to resize event A to run an hour longer than it is currently. He would need to target and then drag the bottom edge. When targeting the edge he is very likely to miss and click on the eventless portion of the calendar below, unintentionally creating a new event.
  • Whenever a change is made (i.e. an event is deleted or modified) there is a confirmation messages given at the top of the page along with an option to undo the change. This allows users to recover from any mistakes very easily.
  • If an event is created on the wrong day, the user can simply drag it to the correct day instead of deleting and recreating the event.
  • This is more of a problem than an error, but the time selection dropdown menu is incremented by 30 minute intervals. Users are unable to set the start time for an event to be 10:10am.
Mar 23
Permalink

Design Ideas for College Students:

1. Lectures, Live!

A website for streaming (live) class lectures targeted at those who are too lazy to walk to class or prefer learning from the comfort of their own rooms. Cornell students would be able to log in using their net ids and access lectures depending on which courses they are enrolled in. The duration for which these lectures are kept up as well as the option for downloading lecture videos would be specified on a lecture by lecture basis by the professor (due to copyright issues). This would be an excellent supplement to lecture notes (also posted online) if the professor went off on a tangent or dove deeper into a certain topic than was described in the notes. If a student were to miss part of a lecture because he or she arrived late or had to leave early, or if the student was unsure of what was written down in his or her notes, or was unable to take down notes fast enough, the lecture would be available online to view at a later time. This has the potential of completely changing how students interact with their professors. It is one step closer to online classrooms.

2. Barcode Buddy

A textbook barcode recognition system for cell phone cameras that allows students to compare Cornell Store prices with those online. When a student needs to buy books at the beginning of the semester he or she normally goes to the Cornell Store to print out a booklist and pick up the appropriate items. When the student arrives at the correct shelf for a certain textbook he or she would be able to pull out a cell phone, take a picture of the textbook’s barcode and run it against a database to check its price at sites like amazon.com or half.com. It would work like current OCR systems except I would imagine the recognition algorithm to be even more straight forward. Instead of deciphering letters and symbols of various fonts, the system would only need to detect and interpret black and white bars. Even my three year old cell phone allows me to take pictures of business cards and automatically add them to my contacts. The most difficult part of implementing this system would be compiling all the textbook barcodes/ISBN numbers. Students would have instant access to the cheapest prices and be able to make more informed decisions based on financial and time constraints.

3. File Freedom

A central file repository for all students, not just computer science undergrads. Students would be able to access word documents, spreadsheets, powerpoint presentations, mp3s, eclipse projects, etc. from anywhere through a SFTP or SCP client program. Since these files are stored externally, they would remain unaffected if a student’s laptop or PC were to crash.

4. Shower Sidekick

A meter that shows how much hot water is left in the boiler. I live with thirteen other people so there have been several occasions when I have hopped in the shower and soaped up before realizing there was almost no hot water left. There would be a gauge and small LCD display on the wall beside the bath tub showing a green light if the shower is good to go or a red light and a countdown timer if the shower isn’t ready yet.

5. Lazy Lounger

A campus-wide underground system of moving walkways so students can be lazy and get fat. It would be perfect for those cold wintery days when the sidewalks are covered in ice and snow. The underground heated pathways would eliminate the need for coats and umbrellas. Students would be able to go to class in a t-shirt and shorts every day.
Mar 03
Permalink

Mini-project II

For mini-project II our goal is to promote and improve the public transportation system of Tompkins County, or more specifically the T-cat bus system. If implemented correctly, the reduction of single driver traffic in Ithaca should follow. For designing this solution we have decided to adopt an iterative refinement process in which all steps are completed quickly to create a rough system, and then repeated multiple times for incremental improvements. We will determine our requirements, design to meet those requirements, implement solutions, evaluate their utility, and then rinse and repeat.


Before our first meeting we each brainstormed at least three ideas for feasible system improvements. Although all of them were great ideas, many strayed away from the user interface requirement. For example, people proposed increasing storage space and providing free wi-fi for bus riders. Over the course of the meeting we whittled out these unsuitable ideas such that by the end we came to a consensus on four overarching ideas. They primarily dealt with increasing public transportation awareness and providing an enhanced rider experience. Many if not all of these ideas stemmed from public transportation problems and issues the group has had to deal with in the past, not just in Ithaca but in their home towns as well.


During the meeting we also decided on our methods of data collection. We will be administering surveys at five separate locations to capture a wide range of demographics. Time of day, day of week, parking availability, and human/vehicle traffic tendencies were all taken into consideration when selecting these locations. A rough draft of the survey has already been pieced together. It poses questions regarding prior experiences with public transportation and reasons for riding or not riding the bus. At the very end we threw in questions about our initial design improvements. From these surveys we are hoping that certain ideas will bubble to the top and allow us to eliminate any ideas that are not applicable to Ithacans. I say this because an improvement to an expansive bus system such as one found in NYC may not apply to a smaller-scale sibling.


We will use these responses to refine our initial ideas and craft new ones. Our system will be redesigned and then pitched to the public once again through another survey – hence the iterative refinement process. Once we are satisfied we will administer a closing interview and complete our final design revision.

Feb 24
Permalink

Upa.org Interface Critique

Ultimate has been a big part of my life for the past five years. Although it is far from becoming a mainstream sport, Ultimate has gained popularity over the past few decades, expanding its reach into the collegiate and international scenes. Within the states there is a national governing body for this up and coming sport called the Ultimate Players Association – or UPA for short. Their website (http://upa.org/) serves as a central repository for sport development, score reporting, event sanctioning, and player registration among many other functions. For this blog entry I will talk about how upa.org violates many of the design principles of an effective site.

When a visitor first navigates to the home page he or she is essentially hit with a wall of text. The side navigation bar is overloaded with unnecessary links that could easily be organized into categories. The web developer tried to present sub-categories by indenting such items within the navigation bar. This proved to be highly ineffective, especially since he or she chose to use the same exact color, size, and font for all menu items. A simple and logical solution to this problem would be to utilize drop down menus. This would clear up the clutter and consequently provide quick access to the site’s pages. By not overloading the visitor’s capacity limits, he or she can briefly scan the navigation bar and navigate to a specific page without thinking, thus providing instant gratification.


Conversely, the horizontal navigation bar is nearly invisible as it is tucked away at the very top edge of the screen. It is almost obscured by the panel of images that run along underneath it. One possible solution is to swap their locations such that the links are underneath the images. Another would be to integrate it into the main navigation bar along the left hand side.


Furthermore, the hierarchy of information is a bit ambiguous in the right hand panel. The developer chose to bold section headers and use “bullet points” to define the subsections. Although this is one step better than its left hand counterpart, it still does not provide enough contrast to guide the visitor’s eyes. The developer should consider using color, positioning, size, and edges to clearly delineate the hierarchy.


As a registered player of the UPA, I often need to login for various reasons. Unfortunately the developer chose to turn this process into a scavenger hunt. There is no username and password input readily available on the main page. Instead it is buried somewhere towards the bottom of the side navigation bar. Apparently he was just too lazy to implement a two field form, or copy and paste a few lines of code he had already written for the separate login page.

Here is how my redesign would look like:

Feb 13
Permalink
Feb 11
Permalink

LaTeX - First Impressions

Loved…

…the cascading style sheet equivalent for word processing
…the emphasis on content rather than presentation
…the ability to create beautifully typeset documents in like 5 seconds
…the super logical user defined document structure

Hated…

…the rather steep learning curve I’m currently trying to tackle
…the super finicky commands and special character recognition

Feb 10
Permalink

Love for the Nipple

Despite the incessant noise emitting from the fan of my T43 with which I am currently typing this blog entry, I have been an avid fan of IBM Thinkpads. For those of you who have used Thinkpad notebooks before, there is this little red ‘nipple’ as I like to call it embedded in the middle of the keyboard, between the ‘G’ and ‘H’ keys. Some people hate it. I love it. In fact, I’ve grown so accustomed to it now that I find trackpads rather difficult to use. This ‘nipple’ is part of IBM’s mouse replacement TrackPoint system. In addition to the little red ball, the system includes three other buttons directly below the spacebar. The left and right [red] buttons are typical of any other mouse equivalent but there is also a blue button positioned in between them.

The ‘nipple’ acts as an extension of your hand. Pushing it left and right shifts the cursor horizontally and pushing it up and down shifts the cursor vertically. The speed at which the cursor moves depends on the amount of pressure that is applied. The harder you push, the faster the cursor travels. When combined with the middle button [by pushing both simultaneously], it becomes a pressure sensitive scrolling mouse wheel. Unlike typical mouse wheels with invariable scrolling speeds [not counting Logitech’s MX Revolution], this combination allows users to fly through large documents and inspect pages line by line with the same controls.

This design allows for greater efficiency. You can go from typing to pointing, scrolling, and selecting with negligible hand movement. Your fingers never stray away from their typing positions and your palms stay planted along the bottom ridge of your laptop keyboard. To point and scroll all I have to do is shift my index finger off the ‘J’ button onto the red ball and my thumbs off the spacebar onto the left and middle buttons. With trackpads you must move your entire hand down before sweeping your finger across the pad. If you wish to move from one end of the screen to the other with a trackpad it would require multiple swiping motions. Also, there is no mouse acceleration as you would find with the TrackPoint system.

This design, however, is not without flaws. When an individual first uses the track ball there is a slight learning curve as with any other input device. He or she must adapt to the sensitivity and mouse acceleration or adjust the cursor settings accordingly. It is not as intuitive as a trackpad – if you draw an ‘S’ on the trackpad, the cursor moves in an ‘S’ like fashion. There is also a problem with ‘cursor drift’ in which the computer registers cursor movement when the track ball is left untouched. Furthermore, there are no foreseeable equivalents to some of the multi-touch features of the trackpad.