Design v.Beta
- kayak.com use case: https://www.dropbox.com/s/a21qtysxiu70uvs/kayak-usecase.mov
#Walkthrough/Help
- Header text: "You are using TowTruck!"
- Body text: "TowTruck is a Mozilla Labs service that makes it easy to collaborate in real-time on [site]."
- Has the Vimeo Video
- needs backup image if Vimeo video is not playing.
- Header text: "Edit your Profile"
- Body text: "You can edit your TowTruck name, avatar and user color here. You can also end the TowTruck session here."
- User enters their name here in an input field in the modal Walkthrough.
- Name is required, and the user can not hit Close or Next until they put in their name. Close/Next is greyed out.
- In the middle of the modal is a screenshot of the Menu.
- Header text: "Connect with friends"
- Creator will see text that will say "Invite friends to the TowTruck session by clicking the share icon."
- Participant will see text that will say "Add friends to the TowTruck session by clicking the share icon."
- User invites a friend to the session in field in the modal Walkthrough. Text next it to it should say "Paste this link in IM or email and send to a friend!"
- In the middle of the modal is a screenshot of the Invite window.
- Header text: "See who's in the TowTruck session"
- Body will say: "Friends who join your TowTruck session will appear here. You can click their avatars to see more."
- In the middle of the modal is a screenshot of the Participant window.
- Header text: "Chat with friends"
- Text will say "When friends join your TowTruck session, you can chat with them here!"
- In the middle of the modal is a screenshot of the Chat window.
- Header text: "Talk in real-time"
- Text will say "If your browser supports it, click here to begin a live audio chat through TowTruck. Since this is an experimental feature, you can learn more here."
- In the middle of the modal is a screenshot of the WebRTC window.
- Might not be in the Walkthrough (05.24.2013)
- Header text: "Start TowTruck"
- Text will say "Alright, you're ready to use TowTruck! Now get collaborating on [site]!"
- Disable user from clicking on dock and interacting, otherwise it will throw up windows during the Walkthrough.
- Any notifications, chats, etc should be behind the overlay, otherwise it will pop over the Walkthrough and confuse the user.
- Walkthrough needs pagination to tell user how many steps in Walkthrough there are.
- Walkthrough modal should stay in one place and not jump around.
- Walkthrough needs pagination to tell user how many steps in Walkthrough there are.
- Walkthrough has a skip button that ends the Walkthrough that says "Use TowTruck!"
- Arrow animates to point to the part of the dock.
- Mouse should have icon to show it's not actionable on the dock #306
#User joins session
- OR the flow might be the one below, which includes the Walkthrough
#Dock
- your Profile avatar should have your participant color as small triangle in the upper right corner of the image box
- there is a little triangle next to the avatar to signify there is a dropdown menu
- hitting the button creates a dropdown menu
- share/invite icon will create a popout window
- mouse-hover on avatars displays their name in a bubble
- participant avatar has 2px border with their color
- user can drag the dock to different sides of the browser chrome.
- the sides of the browser chrome where the user can bring it to are highlighted.
- all icons should have a tooltip noting what they are
- the Participant, Chat, and Invites create a window next to the dock.
- The Profile btn creates a dropdown menu.
- In the Profile dropdown menu, each menu item creates a modal, except for "Change your name" and "Help"
- The WebRTC button creates a popout window, out of the browser chrome.
-
Here is a baseline window, with the Title up top, a close button on the right. Text in the middle, and action buttons at the bottom.
-
Here is how window will animate when it's pressed to open: https://www.dropbox.com/s/orzlwc9u0c0zvyl/popout-animation.mov
-
Windows are used if user might/can multi-task
-
Windows: Invite, Chat, Participant, Audio Chat
-
Border radius is 4px
-
Here is a baseline for a modal. It has an overlay in the background with #000000 at opacity 0.7%:
-
Modals are used to focus the user interaction
-
Modals: End Session, WalkThrough, Feedback, Update Avatar
-
Border radius is 4px
#Profile
- Here is how a user can update their name: https://www.dropbox.com/s/6na5zleq4nw48rz/towtruck-baseline.mov
- They can click "Change your name" and the name input field highlights so they can change it and press Enter or click outside of the input field to save it.
- User clicks "Update avatar" from dropdown menu, and a modal appears that says "Update avatar"
- the menu closes
- the users' avatar is on the left, and he has 2 options, "Upload a photo" a new photo or use the webcam to "Take photo"
- the user can also Cancel or press Save if he has changed the photo. Otherwise Save will say Okay.
- if user presses Upload, a File Directory drops down, and the user selects a file.
- the avatar on the left changes, and the user can mouse over which turns the cursor to a move cursor. The user can move the picture around to get it right in the circle frame, and use the sliders to adjust the size of the photo.
- They can hit Cancel or Save to use the photo.
- If the user presses "Take photo", they're face appears in the screen on the left in the modal, and an icon appears to take the photo (a camera icon)
- User clicks "Update color" from dropdown menu, and a dropdown pointer appears that has color blocks
- the menu goes away on click
- once user hits color, the color is updated in the Menu as is the color next to 'Update Color'
- Text should be "Update color
- Clicking the Feedback button brings up the Feedback form
- Clicking the Help button starts up the Walkthrough again.
- Clicking the End Session brings up a modal asking the user if they'd like to end the session.
- the body copy will have some text that notifies the user that this will kick the other participants out of their TowTruck session too.
#Invite
- The header text will say "Invite a friend"
- Body copy will say "Share this link over IM or email:"
- The header text will say "Invite a friend"
- The header text will say "Add a friend"
#WebRTC Audio
- User can end audio chat by pressing the microphone button
#Chat
- Window has the title "Chatroom" in the header. The header also has a close button.
- The participant avatars have the participant colors on the border at 2px.
- The top of the chat window displays the participants in the current session.
- "Me" should be your actual username eg. "Bob".
#Participants
- Clicking on the participant's avatar in the dock will open the participant's window, and scrollTo the user on the page.
- Here is how it works: https://www.dropbox.com/s/8jmuthk6rsbe7gi/cursor-highlight.mov (movie shows the cursor popping in, but it would actually be pinned to the bottom of the page – pop in only happens when the cursor appears because of a new participant on the page)
- Also, the Participant window will pop out
- Clicking the participant-finger/name will scroll the user to their current location on the page, and open up the Participant window
- Admin/creator for the session has an option to remove the participant from the session.
- Participant does not see an option/button to "remove another participant" in the participant window.
#Participant-finger
- when user is down the page, cursor will not bounce, but will have a shimmer effect.
- when user is down the page, the cursor will rotate 90deg counter-clockwise to point down.
- When the user is typing the animation will look like this: https://www.dropbox.com/s/3mri6oiquyqluxk/mouse-cursor-typing-pointing.mov
- When the user is down the page, the arrow animation will look like this: https://www.dropbox.com/s/3mri6oiquyqluxk/mouse-cursor-typing-pointing.mov
- when user is down the page, there will be no cursor pop-in, like here: https://www.dropbox.com/s/8jmuthk6rsbe7gi/cursor-highlight.mov
- pulse click has participant color
- Active - For an active participant on the same page as you - Their avatar in the dock will have an opacity of 1. Their cursor + name opacity will be 1.
- Idle - For an idle participant on the same page as you - Their avatar in the dock will have an opacity of 0.3, and it will have a small icon/badge on the lower right over their avatar that signifies they're idle. In addition, their cursor will have an opacity of 0.3 as will their name.
- On another page - Their avatar will have an opacity of 0.3 in the dock, and there will be a badge/icon on top of their avatar that signifies they're on another page. In addition, they will not have a cursor on the page.
- Away/off-screen - when a user is off the page or out of the browser chrome.
- if a user clicks on the participant-finger, and are on the same page, and the participant is not in the immediate viewport, the user scrollTo the participant + opens up the participant window
- Handshake concept (when user's have to agree on saving or committing some information on a page.) https://github.com/mozilla/towtruck/issues/372
#Notifications
- when a participant joins the session, a notification slides in
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- will have an error icon associated with it
- notification will be actionable
- copy will say "[user] wants you to come back to their page. Would you like to follow? [Yes] [Not right now]"
- user can click the "X" to dismiss the notification.
- this notification type does not fade away
- these notifications also appear inline in the chat window with the buttons
- notification will be actionable
- copy will say "[user] has gone to page: http://www.asdf.com. Would you like to follow? [Yes] [Not right now]"
- user can click the "X" to close out the notification.
- this notification type does not fade away
- these notifications also appear inline in the chat window
- when a user has followed you to your current location, you will receive a notification that "[user] has joined you on this page."
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- if there are multiple notifications, they stack on top of each other, then move down.
- when the chat window is open, the notifications will appear inline in the chat window
- the notification will slide in at the top of those windows
- the notification will slide in normally next to the dock
- the notifications will appear behind the overlay, and are non-actionable.
- this notification will have to be user actionable.
- a notification slides in notifying the user they have to turn on their Microphone
- these notifications also appear inline in the chat window
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- if a user has changed their name or avatar, a notification will slide in, that will fade out after 3 seconds.
- there will be an inline notification in the chat window signifying this as well.
- when a user timesout or is disconnnected, this will be noted "[user] has left the session due to a timeout."
- these notifications fade away after 3 seconds
- these notifications also appear inline in the chat window
- The animation for how the notification slides in and then fades away: https://www.dropbox.com/s/fduyvphu6ex4w6f/notification-animation.mov
- Animation for multiple stacked notifications: https://www.dropbox.com/s/fduyvphu6ex4w6f/notification-animation.mov
- If there's a chat notification, and the chat window is open, the notification appears inline in the chat window.
- Inline notifications:
- Inline notification with actions:
- Notifications always slide in at the top of the open window or near the top of the dock. They slide in right above the top of open window if a window is open in the dock.
- Notification slides in at the same top edge of the dock if no window is open
- Notification slides in at the top edge of the dock if the Profile menu is open, but beneath the menu
- If a modal is open, the notification slides in beneath the overlay so the user is not interrupted in their flow, but they can see the notification
- If a window is open, a notification slides in, and a second notification slides in on top of that one
- Notifications that are Banners fade away. Notifications that are Alerts have an action on them, like Follow or Nudge and do not fade away
- If multiple notifications appear really fast, the last notification's text quickly changes and the notification pulses. The text says "There are 8 new notifications!" and if the user clicks that notification, they're brought to the chat window. multiple notifications
- The Chat icon will have a notification badge for any unread notifications. Notifications are "read" if a user scrolls past them in the chat window or if they're interacted on. notification badges
- If the Chat window is open, the notifications just appear inline in the chat window.
- If the user closes a window and there are multiple notifications still stacked, they'll unfold and slide down.
- If there are multiple notifications, and some of the notifications are Alerts, those notifications will stay until the user interacts with them. If the Alert notifications are stacked when a window is open, the most recent will be on the top, and will disappear when the user acts on that notification.
- If a user clicks a chat notification, it'll open up the chat window
- when a user clicks the "Follow" button in Follow notification, they follow the user to the next page
#Participant joins session
- When a participant joins the session, it'll look like this: https://www.dropbox.com/s/iay58833c0tw001/avatar-enter-exit.mov
- In addition, the dock will slide down extra space, and avatar will pop in like this: https://www.dropbox.com/s/6na5zleq4nw48rz/towtruck-baseline.mov
- The cursor will pop in like this: https://www.dropbox.com/s/8jmuthk6rsbe7gi/cursor-highlight.mov
- If the creator/admin user was on a different page when the participant joined, the participant should go to the current page the creator/admin is on instead of getting a notification where they are.
#Participant leaves session
- When a participant leaves the session, it'll look like this: https://www.dropbox.com/s/iay58833c0tw001/avatar-enter-exit.mov
- In addition, the dock will slide up, and avatar will pop out like this: https://www.dropbox.com/s/6na5zleq4nw48rz/towtruck-baseline.mov
- The cursor will pop out like this: https://www.dropbox.com/s/8jmuthk6rsbe7gi/cursor-highlight.mov
#Creator ends session
- for the user ending the session - a notification will appear that the TowTruck session has ended, and that fades out. the user can still interact with their page.
- for the participants in the session, they will see a modal that will have header text that says "TowTruck session has ended" and body text that says "[user] has ended this TowTruck session. If you would like to stay on the current page, please click [Continue] below. Otherwise, close the browser window." with a [Continue] button in the modal.
#Mobile UX
- Needs audio/beep notifications
- Pulse click is on by default
- Audio chat is on by default (till there is an off)
- Dropbox wireframes/sketches: https://www.dropbox.com/s/u1lhsbkja93s392/towtruck-mobile-v1.pdf [user] receives a chat message from Bob. They are planning to get a gift for their mom with their siblings for Mother's Day. [user] taps the link in the message.
- [user] is then pushed to the Amazon site where Bob is looking at Fitness gifts for mom. [user] is a the Join modal. They see their avatar and name (which is set by default). They also see who else is currently in the session. And they see that WebRTC Audio is currently on when they entered the site. They tap the Yes button to continue.
- Now [user] is on the Amazon fitness list view on their mobile site. There can be some hints of the user's color as highlights on the window chrome. There will be audio notifications, such as a beep, when a new user joins or leaves. Pulse tap is on by default. Audio talk or chat is on by default too. Their will be a "Path"-esque tool that will give the user the tools such as a walkie-talkie audiochat microphone. They can end the session from here, see the participant avatars and turn on the sticky feature.
- Notifications will slide in, to follow someone to a new page or if someone left/join the session (this will disappear after a few seconds)
- There should be smaller cursors on the screen, as well as transparent cursors (this will be for the site as well - set to 70% opacity)
- Feature buttons (such as sticky) will be states, and will turn off when used