GR2 - Designs

Scenario

Jeanette, a freshmen in college, wants to make a birthday card for her friend Jode, who's birthday is coming up in two weeks. She understands everyone is busy, and that some of Jode's friends may not be in the area. So she goes to Eloha, where she signs up for an account and chooses a template for the overall look of the card. After successfully signing up and choosing a template, Eloha presents her with a link to send to all her friends that she'd like to sign the card. One of them is Max, who goes on Eloha and writes his own message. He has the option of signing up for an account if he would like to save his work and be able to come back to it later in case he wants to edit anything. Or he can just choose to confirm his final message and not sign up for an account, knowing the fact that he will not be able to make any changes afterwards. He decides not to sign up for an account, and sends the link to another friend Xindi.

Xindi goes on to Eloha, writes a brief message, and decides to sign up for an account so that she can come back to the card at a later time to finish working on it. A few days before Jode's birthday, Jeanette goes back onto Eloha, and decides to compile everything so that it'll be ready for Jode. On the day of her birthday, Jode receives a new link that takes her to her Eloha greeting card, filled with all the messages and photos that her friends have included for her. Everyone is happy, and the birthday is a success!

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.