GR2 - Designs

Scenario

Jeanette, a freshmen in college, wants to make a birthday card for her best friend Jode, whose birthday is coming up in two weeks. Unfortunately, all of Jode's friends are either super-hosed from school or in another continent. She can't possibly invite everyone to come to Jode's party, not even to sign her birthday card. So she goes to Eloha, where she creates an account and an e-card for Jode. Eloha then generates a URL link for her to send to all of Jode's friends that she'd like to sign in the e-card.

Max receives an email that day day with the link to sign Jode's birthday e-card. Longtime lab buddies, he readily agrees and follows the link to Eloha. He briefs through Jeanette's messages and inputs his own witty rhyme. In a rush to get to his next class, Max hurriedly saves the card and saves anonymously. Although his message won't be perfectly polished, he'll be able to live with a few mistakes as long as he can finish fast. Later that day, Max meets Xindi, another Jode's pset buddy, in class and passes on the URL link to Xindi when they bring up Jode's upcoming birthday party.

Later that night, Xindi goes on to Eloha, writes a half-finished message, and saves her message under a new account she creates so she can come back to the card to finish it. After two days, Xindi finally finds the time and OCDness to finish her literary work of perfection by login in, editing Jode's card, and saving with numerous revisions.

After a week's worth of message collecting, we're finally two days away from Jode's birthday, Jeanette signs back into Eloha with her registered email/password. She previews the card , adds some last finishing touches and publishes the e-card.

Jode's birthday arrives, she wakes up to a surprise Happy Birthday email in her inbox with a link to her Eloha greeting card filled with custom messages and photos that her friends and family have compiled virtually together for her. Jode is ecstatic to read messages from her old friends and sits at her computer all morning cracking up at silly pictures of the past and the love sent from all her close-ones. Mission Accomplished!

Designs

Graphics Editor Layout

Jeanette visits the Eloha homepage. The front page is simple, has three main actions: log in, create an account, or make a card (without signing in). These are flushed to the right. The buttons are nearly on the right edge, making them incredibly easy to access by Fitt's Law. It is made very clear that an account is not needed; the label says "Accounts (Optional)" and there is a section that says "Start Designing!" and "Make a Card!" implying that one could just go straight into making a card without logging in.

Jeanette logs in creating a page-modal popup login box. There is a close button the popup as well as a Cancel button, both of which will return focus to the homepage in case they clicked on "log in" by accident.

Page-modal popups prevent the user from doing unexpected actions aside from the current action (like logging in), but also require the user to navigate their mouse cursor to the popup to interact with its fields. So, for example, we could've used a drop-down accordion-like panel that appears when the "Log In" button is clicked. That way, the mouse cursor is already in the vicinity of the login fields and so it would make it easy to navigate to them, as opposed to the modal popup in the center of the screen.

Jeanette sees her card list, which has no cards currently. If the card list is populated, it will display all cards available with a small thumbnail preview of the card. She can access account options on the right, which is similar to how the homepage was laid out, all controls and commands on the right. This is consistent with the homepage and is used (mostly) all across the entire website. The message in the center of the card list lets Jeanette go straight into making a card.

Jeanette chooses to create a new card and is brought to the canvas page. An immediate page-modal popup lets Jeanette choose a starter-theme for the card. The themes are provided in grid-format with a picture preview of each. Each has a name associated with it. The currently selected one has a border around it and shows up in the bottom of the popup: "Currently selected: Blank".

She also has the option to not choose a theme and go with the default by clicking on Cancel or the X button. She can bring back the popup on the right under the card command "Theme".

Jeanette sees the canvas. Tools are on the left, as they are in many graphics editing programs (familiarity). They are also flush to the left, so the mouse cursor will be bound to the edges of the screen and will always land (at least horizontally) on the correct tool button. On top is the title of the card, which has a text input border around it, as an affordance showing that it can be edited. The "Back to All Cards >>" command has the ">>" to indicate the backwards motion to the card list of the user.

Clicking on "Contributors" opens a page-modal popup showing contributors to the card via their email. It also displays their permissions. You can edit by directly typing in a row and selecting permissions via a drop-down list. The current entry is highlighted. Jeanette sends an invite to Max here.

It may be a bit slow to manage large groups of contributors since the user must edit each contributor individually with regards to permissions.

Max is editing text using the text tool (depressed in the tool menu). A typography bar appears showing common text options. The text edit box is dotted to separate it from other objects on the canvas, and is adorned with resize handles.

As Max leaves, having finished his message, a warning dialog pops up and asks him if he would like to create an account to continue to edit his message after he has left. His options are "Yes", "No", and "Cancel", "Cancel" prevents the default behavior of the page being closed or navigated away from.

Xindi creates an account, when faced with the same dialog box that Max encountered. It asks for her email and password, both with confirmation boxes. A checkmark or an X indicates whether or not the emails and passwords match to prevent the error of entering the incorrect email and/or password.

Jode receives her card and views it. The page has nothing else but the card, the Eloha logo which redirects to the main page and the title.

Direct Form Layout

The sketches above show the process of Jeanette going on to Eloha to sign up for an account to get a Birthday Greeting card started for her friend Jodessa.  She signs up for an account and then chooses a template for the overall look of the card.

Jeanette receives a link to send to her friends, one of them being Max, who enters his name, message, and chooses to upload a photo and music.  He chooses to not sign up for an account, which he realizes his changes will not save.

Xindi goes onto the page and fills out her message, and decides to save it for later editing.  Jeanette goes back on to Eloha to compile everyone's messages.

Jode receives the link to go to and view her compiled version of the greeting card, where she can click on different icons and view people's messages and photos.  She can also click through messages with the menu of messages on the left bar.

Good Points:

- Learnability: This is a pretty straight forward design in that all the user does is fill out a form with her name, message, and whether or not she would like to attach images/other media.  It is a very directed step by step process in getting a card out there.

- Visibility: All buttons and text are laid out in a way that will allow the user to see the buttons in signing up and confirming messages.

Bad Points:

- Efficiency: This design is not efficient in that it forces the user to have to go through a step by step process in creating a card, and that skipping around is not allowed.

Tag Cloud Layout

Jeanette goes to Eloha.com (1) homepage, clicks "Create a Card" and is redirected to (2) Card creating page. She inputs Jode's first/last name and her email and selects a card style from options on top in (3) page.

Once she selects her card, she must login to finalize the card and create a url link to send to her friends. In this case, she hasn't made an account yet so she signs up in (5) and inputs her name, password, and email into the form.

Once completed, she'll receive a URL link in page (6) to copy and send to Jode's friends so they can contribute to the card also. Once she clicks on the "ok" (check mark) button, she is redirected to page (7) to start inputting her very own messages and/or change the style of the card. She previews the card in its entirety full screen with the button on the top left corner of the (7) page.

Max receives the link from Jeanette and visits the "Link page" (11), inputs his name, message and clicks "save". Upon saving, he's prompted with the option of saving as a registered "User" so he can edit his message later or save as "Anonymous". Because Max is in a rush, he just saves anonymously and finishes with the confirmation page (13).

Xindi also receives the link from Jeanette and visits the "Link page" (11), inputs her name, half of a message and clicks "save". Xindi is OCD about her messages and wants to finish it later so she signs up for an account in page (12) and is redirected to confirmation page in (13). Two days later, Xindi logs back in from clicking "Manage Cards" in homepage (1) and select Jode's card in her control panel page (10) to redo her message on edit page (11). She clicks save finally when she's done and closes her browser on the confirmation page (13)

Finally after a week's worth of message collecting, the card is now filled with awesome messages from Jode's friends. Jeanette logins and goes to the edit page like Xindi and previews the card. She notices that Max wrote some inappropriate comments so she deletes his message by clicking the "X" button on bottom right in the message panel on the bottom of page (7). On the confirmation preview page (8), Jeanette makes some final touches to the style, checks Jode's name and email were typed in correctly, and hits "Publish!". She is redirected to the confirmation page (9) and closes her browser knowing that her surprise Eloha card will appear in Jode's inbox on her birthday.

Good Points:

- Learnability: Jeanette can create a card and have the link to send out within 4 clicks from the homepage.

- Portability: She can send the URL to her friends via email, fb, twitter, IM, or even in person.

- Visibility: All actions in edit page are instantaneous, you get what you see so users can readjust easily as they are typing to correct mistakes or edit the layout.

- Simplicity: Since the whole card is text-based, Jeanette will have guarantee that the final product will look pretty and standardized. Also, collaborators in the card can get their message across and save within 2 clicks and know the product of their text will look nicely formatted and styled to their taste. This makes card signing easier than ever.

Bad Points:

- Lack of media options: Collaborators won't get to attach videos, doodle, or scrap together pictures into the ecard. This may inhibit creativity and cramp people's styles.