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.
- 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
#Dock
- your Profile avatar should have your participant color as a 2px border
- 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:
- 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