Compact Universal Design Proposal

Concerns addressed

We'll list specific concerns related to functional design and suggest some improvements to each.

01 Concentrating actions in one place and bringing persistence to it on any screen size

Emote, effects, music, area, character, role and extras buttons can be scoped in one action bar. Unlike previous scrolling UX, action bar is subject for quite compact layout, where less buttons take place.

Improvements suggested

[ ] Show current information about:
- [ ] emote/sprite,
- [ ] character's name and chosen role,
- [ ] area name.
[ ] Place buttons near by it for:
- [ ] effects selection,
- [ ] music selection,
- [ ] extras.
[ ] Make action bar sticky to the bottom of web view, which also means to persist when touch keyboard is there: it will be on top of that keyboard.
[ ] Make above an option, so it can also be non-sticky if user prefers.

02 Providing a fast way to choose shout animation

Shouting is pretty common in the game, it should have been as easy as pressing one button and sweeping the finger/hand to needed shout animation.

Improvements suggested

[ ] Bind touchstart and mousedown events to "Send" button, also bind keydown event to input for Enter key.
[ ] Show popup whenever these events are triggered. Popup includes all shout animations ("Objection!", "Hold it!", "Take that!") and default option for no animation. One can be chosen using touch device, or mouse, or arrow keys, until touchend, mouseup, keyup are triggered.

03 Providing a fast way to choose emote/sprite

Changing emote/sprite is common as well. Their number varies between characters, so unlike for shout animations, this popup should be pretty flexible and persistent on occasion.

Improvements suggested

[ ] Bind same events as for "Send" button to emote indicator in action bar.
[ ] Show popup whenever these events are triggered. Popup includes all character's animations (if none, popup won't be shown). One can be chosen using touch device, or mouse, or arrow keys, until touchend, mouseup, keyup are triggered. But this popup can be persisted when no animation was selected.
[ ] Provide a way to show as many animations as possible: some sort of pagination maybe (because icons should have size of a finger tip at least). No scrolling should be involved in this task, pure swipe and drag timer.

04 Informing about area where player was thrown into and making area selection primitive

Obviously, areas are other matter and they should not interfere with music list in new design. Current area's name should be persistent.

Improvements suggested

[ ] Show area name, that would be place where one can switch to other.
[ ] Clear scene whenever area is changed: halt animation, save and clear log.
[ ] Maybe make some sound on area switch.

05 Compacting OOC chat

Out-of-character chat (a.k.a server chat) has less significance compared to in-character one, thus allowing us to give it less attention on mobile screens.

Improvements suggested

[ ] Make initial substitution of OOC chat by IC chat using swipe mechanic for mobile devices (swipe IC chat left to reveal OOC chat and vice versa).
[ ] Provide an option to make OOC chat persist alongside IC chat (which is just requirement for large screens, but also must look legit on small ones).

06 Bringing attention to server messages

Let's see: there are big message on join and feedback messages by server. They stay in shadow of gameplay, thus keeping player uninformed.

Improvements suggested

[ ] Dedicate server join message in MOTD (message of the day) modal to properly greet players on server and introduce rules to them.
[ ] Pop feedback messages (such as "position changed", "character switched", "error occured") in small flashy notification.

07 Compacting credibility bars and giving hint about their purpose

Bars that indicate how many penalty was given to defense and prosecution should occupy space as little as possible. Also players don't get an idea why these bars exist: some hint is required.

Improvements suggested

[ ] Figure out the best layouts of credibility bars that don't affect the rest of user interface (absolute positioning) and don't overlap foreground elements.
[ ] Make unobtrusive hint with text "CREDIBILITY", also add "DEF" for defense and "PRO" for prosecution.

08 Music popup

Few interesting features bring the need of "Music" popup: player could search needed track by keywords and save it to favorites for further use. Yet player can spectate the scene while listing tracks.

Improvements suggested

[ ] Substitute the area of in-character chat with tracks list - that will be popup.
[ ] Additional buttons for each track can be added: playback preview, fav/unfav.
[ ] Provide track search.
[ ] Provide Favorites category, where user puts the tracks of choice.

09 Effects popup

"Effects" button in action bar triggers consequent popup. It should have "Shake", "Flash", "Flip" effects, text color selection, also effects and actions dedicated to current role ("Witness Testimony", "Cross Examination", giving penalty).

Improvements suggested

[ ] Effects popup works mostly like animation selection, unless it won't dismiss on touchend, mouseup, keyup. Instead it persists like a modal until user presses outside of popup or X mark.
[ ] "Shake", "Flash", "Flip" and color selection act like switches. Credibility controls for judge act like ranges. WT and CE are basically buttons which trigger corresponding animation and dismiss popup.

10 Extras modal

We mentioned so-called "extras" button in action bar description. It should trigger "Extras" modal that contains server information and "Evidence". Let's describe its primary purpose.

Improvements suggested

[ ] Server information will include server name, address, interactive description. Also user could easily copy an invitation link to server: same page URL with current area ID specified.
[ ] "Evidence" will lead to evidence screen. Actually, we could substitute it with "Music", if player presents evidence more than changes of music, so "Evidence" button could be easily placed in action bar.

11 Evidence screen

Evidence screen presented as Court Record in AA games looks promising enough, I think it should be taken as an example.

Improvements suggested

[ ] Make one size tiles for any evidence, don't let it suddenly overflow.
[ ] No scrolling should be involved, only swipe and side buttons for listing through stuff.
[ ] Dedicate the page for profile evidence, i.e characters in the room.
[ ] The sound for opening Evidence screen would be a good addition to gameplay, because why not?
[ ] Delegate the role of "Send" button to "Present" button whenever the message was typed in input already. That will speed up the process of presenting evidence drastically, which is a joy.

Examples

As per 07/28

You will notice that main stage is always sized according to 4:3 aspect ratio.

Icons used: Material Design (Google).

Default portrait view

Default landscape view

Control Menu

Menu is shown in control panel (as sibling to logs) whenever user presses "three dots" button.

Initial mockup

The position of action bar is pretty debatable.

AttorneyOnline / webAO