Feature/get updates ux #240
Conversation
src/react-components/info-dialog.js
Outdated
| @@ -183,11 +185,45 @@ class InfoDialog extends Component { | |||
| </span> | |||
| ); | |||
| break; | |||
| case InfoDialog.dialogTypes.help: | |||
| dialogTitle = "How to Play"; | |||
There was a problem hiding this comment.
"How to Play" is a bit too game-like IMO. Maybe "Getting Started" would work?
There was a problem hiding this comment.
Yeah you're right, I think 'Getting Started' and 'Learn the Basics' works better.
| <p> | ||
| The <b>Pause/Resume Toggle</b> pauses all other avatars. You can then block them from having further | ||
| interactions with you. | ||
| </p> |
There was a problem hiding this comment.
Referring to the help-hud image. I'm not sure if it makes sense for the pause button to be so prominent -- it should not be a frequent action. I thought we'd keep the avatar icon and have it trigger the profile dialog.
There was a problem hiding this comment.
I am actually not sure about this one -- here's my thinking:
-
I actually think Pause/Resume probably deserves to be the primary action. Here are a few reasons:
- It is an escape hatch, so if anything bad is happening users will immediately know how to stop it
- It is the only way to block people right now
- Eventually I think it will be the way to enable moderation, seeing more detail about who is in the room, being able to switch in/out of observer mode, etc. I am imagining it to be like pause mode in bioware games -- it's on the space bar typically because it's a primary action you use all the time. The great thing about it is it means we can move tons of UI elements out of the main experience, so they don't break immersion. But that also means we have to make it extremely prominent since it is a "must-understand" feature to actually be able to use the app.
-
I was imagining the profile editor would be opened up via a floating avatar icon + name in the top right corner as is done in Google apps. In-game, we will need a full UX to see yourself as a 3d avatar (we haven't started on this yet, but I'd imagine that it will be unrelated to the way we allow you to edit your identity in 2d)
There was a problem hiding this comment.
Hmm, okay. Thanks for explaining it. I guess we'll have to see if we do end up going in that direction. I've gotta admit, "freeze" is a cool feature 😀
src/react-components/footer.js
Outdated
| <span className={styles.menuButtonText}> | ||
| <strong>Sign Up</strong> for Updates | ||
| </span> | ||
| </button> |
There was a problem hiding this comment.
This makes the menu too tall in landscape on an S5. The close button gets hidden above the top of the screen.
| <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" /> | ||
| <div onClick={props.onClickName} title={props.name}> | ||
| {props.name} | ||
| </div> |
There was a problem hiding this comment.
Long names and the account image are right-aligned and cut off now.
| <p> | ||
| The <b>Bubble Toggle</b> hides avatars that enter your personal space. | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
Help content is too tall for iPhone 5/SE and Galaxy S5
There was a problem hiding this comment.
Yeah, I ran out of room. I edited it down as much as I could
There was a problem hiding this comment.
Also worth mentioning that we can/should get a whole lot smarter about help text. For example, we should have specific copy for each device. So the next pass can probably address this problem since a lot of the copy on an S5 is irrelevant and can be removed since it's not VR capable, etc.
src/react-components/footer.js
Outdated
| @@ -29,7 +34,7 @@ export default class Footer extends Component { | |||
| </div> | |||
| <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}> | |||
| <i className={styles.menuButtonIcon}> | |||
| <FontAwesomeIcon icon={menuVisible ? faTimes : faEllipsisH} /> | |||
| <FontAwesomeIcon icon={menuVisible ? (window.innerWidth < 768 ? faTimes : faArrowDown) : faEllipsisH} /> | |||
There was a problem hiding this comment.
This could be done with a media query if you had two icons that you hide/show.
There was a problem hiding this comment.
you caught me being lazy :) I will fix
src/react-components/footer.js
Outdated
| <FontAwesomeIcon icon={faQuestion} /> | ||
| </i> | ||
| <span className={styles.menuButtonText}> | ||
| <strong>Learn</strong> How to Play |
There was a problem hiding this comment.
"Getting started", or "Learn the basics"
This PR: