BRUTE LABS - StudentsConnect UX

StudentsConnect UXA BRUTE LABS projectVersion 2Published May 26, 2011Created by Andrew Hao

StudentsConnect UX 2 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Login Page Users should hit this page first. Ostensibly, this could be used as the StudentsConnect 1 Site Language: English front page. 1. Site language bar: For internationalisation of page. Dropdown menu will be populated with languages. Ideally, autoselect language based on IP/ Hello! Let’s get started. region. 2 Name Jason Avery 2. Name field: Display name. May want to The name your partner will see enforce an arbitrary character limit here (32 char...?) 3 School (USA) Harvard Westlake Middle The school you attend 3. School: Dropdown list items are in form (Country) SchoolName. 4 Language English May need to think about how this will The language you speak appear when we get more schools: may need grouped <select> cells by country. Or eventually choose via dropdown: Start! Nation/Province/School. Or do an autocomplete-like search. 4. Language: The language the user wishes to communicate in. This could be autopopulated based on the school/ country selected prior.

StudentsConnect UX 3 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Connecting - Activating Webcam Here, the webcam is activated and the Flash HW authorization prompt pops up. StudentsConnect Site Language: English The backend should begin the partner match process behind the scenes. 1. Flash auth prompt. This shouldn’t be expected to pop up if the user’s Searching for your partner authorized before in a prior browser session. 2. Allow - This passes the user to the next page. 1 3. Deny - This cancels HW access and users should be redirected to the login page. Jason Avery 2 3 You attend Harvard Westlake Middle and you speak English Cancel Please wait...

StudentsConnect UX 4 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Connecting - Matching in progress Here, the webcam is live and the user now awaits a match from the other classroom. StudentsConnect Site Language: English 1. Live video - The user should see him/ herself live in this screen. Should we give a mic volume bar so they can see that their audio works? Searching for your partner 2. Partner video screen - The partner’s video should show up here. Spinner occupies the frame. 3. User’s info: In format: 1 2 DisplayName You attend SchoolName and you speak Jason Avery Language 3 You attend Harvard Westlake Middle and you speak English 4. Cancel button - Cancels backend match Cancel Please wait... job and sends user back to login page. 4

StudentsConnect UX 5 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Connecting - Matched This screen is reached as soon as the other member connects and has an active video/audio stream. StudentsConnect Site Language: English Both audio/video streams are active now and the kids can hear/see each other. 1. User video stream: User can see him/ Found your partner! herself. 2. Partner video stream: User can see his/ 1 2 her partner. 3. Cancel button: Cancels chat for both users. Jason Avery Ingrid Mantega 4. Countdown text: Numbers count down You attend Harvard Westlake Middle and Ingrid attends Fundación San Andrés like so: you speak English and speaks Spanish Wave and say hi! Starting in 3... [1s passes] Cancel Wave and say hi! Starting in 3... 3 4 Wave and say hi! Starting in 2... [1s] Wave and say hi! Starting in 1... [1x] Starting chat... [UI transition to chat window]

StudentsConnect UX 6 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Active Chat Session This is the view for an active chat session. Both user video/audio streams are active. StudentsConnect Site Language: English 1. Partner video frame 2. User video frame 3. Partner info text 4. Chat module: autotranslate button: Automatically converts partner text into 1 user’s native language. See mock for 2 behavior model. 5. Chat module: text frame Chatting with Ingrid Mantega Ingrid attends Fundación San 6: Chat module: text entry frame. Textarea 3 Andrés and speaks Spanish should auto-resize (heighten) when typed 7 Activity Module text reaches the edge of the box. Auto-translate Ingrid 4 7: Activity module: activities to be played You: hi how’s it going? here. Ingrid: bien, ¿y tú? You: good, i have a lot of homework 8: Language help area: container for these days. language modules 5 it’s hard Concern is that this is below the fold and hard to Ingrid: sí, yo prefiero ver la tele- access. May want to consider making this modal? Or visión a sliding panel? Say something... 9: Translate module. See mocks for 6 behavior model. 10: Common language help: contains 8 Language help common sayings and introductory Translate phrases How do I say... English Spanish Who comes up with these? Are they really My name is Me llamo necessary? How big is the set of words that should what is your favorite fruit? ¿Cuál es tu fruta favorita? 11 go here, and how much should rely on the translate Hello Hola box? 11: Play audio buttons: Plays the foreign language 9 10 Goodbye Hasta luego snippet for the user to hear.

StudentsConnect UX 7 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Translate Module BehaviorTranslate Translate Translate TranslateEnglish Spanish English Spanish English Spanish English Spanish what is your what is your ¿cuál es su what is your favorite fruit? ¿cuál es su1 Initial State 2 User begins typing 3 User pauses typing 4 User resumes typing Initially, both textfields are empty. UI will block with a grey overlay + spinner Overlay and spinner disappear. Note that Overlay + spinner appear again. See Fig. 2. on everything except the active textbox to this could also be a final state. Also, both text areas are clickable and signify that something is happening in the editable (e.g. you can select the text and Pause could be defined as no keypress backend. copy/paste it) events received in an arbitrary time interval, The spinner might be too distracting. say 200ms. It’s up to the dev team to determine how and when to send a translate request while keypress events are being received. Dynamically populate the translated search term upon each response.TranslateEnglish Spanish what is your favorite fruit? ¿Cuál es tu fruta favorita?5 User finishes typing Notes See Fig. 3. The same behavior would work in reverse, say when a user types in the Spanish box, the translation action would happen in the English textarea.

StudentsConnect UX 8 of 8 Version 2 published May 26, 2011 by Andrew Hao (andrewhao@gmail.com)Chat Module Auto-translate Behavior Auto-translate Ingrid Auto-translate Ingrid Auto-translate Ingrid You: hi how’s it going? You: hi how’s it going? You: hi how’s it going? Ingrid: bien, ¿y tú? Ingrid: good, and you? * Ingrid: bien, y tu? * You: good, i have a lot of homework You: good, i have a lot of homework You: good, i have a lot of homework these days. these days. these days. it’s hard it’s hard it’s hard Ingrid: sí, yo prefiero ver la tele- Ingrid: yes, I prefer watching televi- * Ingrid: yes, I prefer watching televi- * visión sion sion Say something... Say something... Say something...1. Default state. 2. Toggle auto-translation 3. Hover line to see original translation• Partner text appears as-is. • “Auto-translate Ingrid” button should appear in depressed state. • Mouse cursor hovering over a partner chat line will cause it to• Click on “Auto-translate Ingrid” button to translate her text. • Ingrid’s text backgrounds should be accent color. Add asterisk display the original text. or equivalent icon to the upper-right hand corner of her chats to • Note that the asterisk or equivalent icon is kept. indicate that something is modified. • Clicking the “auto-translate” button once more returns the state to Fig. 1. • Concern: translation may take a significant amount of time. How to indicate wait state?

http://www.g9labs.com	897
url_unknown	6
http://twitter.com	1

BRUTE LABS - StudentsConnect UX

by Andrew Hao on May 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 904

Statistics

BRUTE LABS - StudentsConnect UX — Presentation Transcript