Skip to content

Instantly share code, notes, and snippets.

@velsa
Last active August 29, 2015 14:06
Show Gist options
  • Save velsa/d855baf5775a7a864987 to your computer and use it in GitHub Desktop.
Save velsa/d855baf5775a7a864987 to your computer and use it in GitHub Desktop.
VOI - UIX specs

VOI - Geolocaton based real-time group voice chat

Description

  • Find people around you
  • Your own chat room, invite guests, visit others
  • Real-time voice chat, multiple people talking simultaneously
  • Secure and Fun
  • Sign up via Facebook - talk with your friends in real-time

Use cases

  • Matchmaking
  • Talk with colleagues and friends who work in the same building / area
  • Find people with same interests around your home / work
  • Shopping in a shopping mall with a group of friends/family
  • Traveling with a group or meeting new people in new cities and around tourist sites
  • Urban quests
  • Hiking, forestry, etc.
  • Lecturing, mentoring, guiding (public and private chat rooms)
  • Show off and fan base: poets, artists, celebrities

UIX

First start

  1. Sign up via Facebook
  2. Adjust your profile:
    • Full Name (shown, not editable)
    • Age, Sex (shown, not editable. if no sex/age is available in fb, allow user to edit them)
    • Pics and Main Pic (choose from facebook pics, local pics, take from camera)
    • Distance to scan (1 km - 20 km)
  3. Create your personal room:
    • Name (20 chars)
    • Pic
    • Description
    • Tags (interests) - with auto-complete using existing app-wide tags
  4. Adjust settings:
    • Defaults for Positional Audio (enabled/disabled)
    • Favorites (Rooms/Users) - remove
    • Blocked (Users/Rooms) - unblock

This way every user will have one personal room.

Other users can join this room and talk with owner and with each other.

Usage

Main Menu is always in the top left part of the screen:

Menu:

My Room             (#)
I'm in: Room Name   (#)
Search
.......................
/f/ Friends         (#)
Favorites           (#)
History
.......................
Profile
Settings
  • (#) shows number of online users in that room/category
  • I'm in: Room Name (#) only shows when I'm not in my personal room
My Room or Room Name:

Enters this room

Search:
  • App automatically scans the area based on user's geolocation (Wifi, GPS)
  • App shows list of rooms found around the user with # of users in each room.
    • List can be Sorted by:
      • number of users in a room
      • time of last activity in a room
      • favorites first
    • List can be Searched by room name, user name, room description and tags

Screen 1:

==Menu      Search | Sort |

|         List Row        |
|         List Row        |
...
List row:
|          |                Room name               # |       |
| Room Pic |                                          | ENTER |
|          | User's First Name | User Status          |       |

Click on a room (List row) opens

Room Profile, Screen 2:

==Menu                          | Fav Icon |

| Room pic |     Room name    | # of users |
|                                          |
|                                          |
|                                          |
|             Room description             |
|                                          |
|                                          |
{              Enter the room              }

|Owner Pic |Owner First Name |Owner Status |
|   owner is in this room / another room   |
|                                          |
{              Owner's profile             }
{               Private chat               }
  • |Fav Icon| toggles Favorite status for the room (and, automatically for the user)
  • {Owner's profile} opens Screen 4 (see below)
  • {Private chat} is only available if owner is a friend and starts a private conversation with him
  • {Enter the room} button, enters the room
  • If there are 10 users in a room already, {Enter the room} button becomes {Join waiting list}|#| button, which shows number users already in a waiting list.

In The Room, Screen 3:

==Menu           Mic Icon | Speaker Icon |:|

|Avatar| |Avatar| |Avatar| |Avatar| | Slot |
| Slot | | Slot | | Slot | | Slot | | Slot |

|                 Chat row                 |
|                 Chat row                 |
|                 Chat row                 |

|          Input text box         |{  PTT  }
  • When user talks, his avatar shines / pulses.

  • While in a room, any user can go to other rooms by clicking on users (avatars) in this room and then joining their personal room.

  • When blocking a room, a corresponding user is NOT blocked

  • When blocking a user, all corresponding rooms of this user are also blocked

  • {PTT} button (press and hold): voice talk

  • Touch input text box: keyboard slides from the bottom, {PTT} button becomes {Send} button.

  • Mic icon: Toggle mute

  • Speaker icon: Toggle mute and sound

  • When two users are talking simultaneously, others have PTT button disabled

  • Max talk time is 20 seconds, if user talked for 20 seconds, his PTT button gets disabled for 20 seconds.

While in a room, user can continue searching for other rooms (from main menu), check out Room and User profiles, etc.

User will continue hearing what is going on in a room even when he turn his phone's screen off.

User can always go back to Screen 3: from main menu.

Right menu:
Split screen        | |
.......................
Voice Activated     | |
Positional audio    |x|
.......................
Favorite            |x|
.......................
Leave this room
  • Split screen: shows one screen with avatars. Sliding it to the left, shows a screen with chat.
  • Voice Activated option is only available if there are 5 or less people in the room
    • When user enables Voice Activated talk (from the right menu), {PTT} button disappears and the app works in voice activated mode.
    • If more than 5 users are in the room, only PTT mode is available.
  • Positional Audio toggles positional sound from users, calculating it based on their Geo location
  • Favorite toggles the favorite status of that room
Avatar:
| S             |
|               |
|    User pic   |
|               |
|               |
.................
| I | User name |

| S |: if user is in my Favorites, shows Star icon here, if not - nothing | I |: icon, shows current user status, which can be one of the following:

  • Active (not away, not muted and not deafened)
  • Active, but muted himself
  • Active, but deafened himself (muted and turned off speaker)
  • Away (deafened automatically)
  • Active, but I muted this user
  • I blocked this user (doesn't matter if user is active or away)

Click on Avatar opens

User Profile, Screen 4:

==Menu                            |Fav Icon|

|User Pic | User's First Name | User Status|
{                Poke user                 }
{                Mute user                 }
{                Block user                }
{                Kick user                 }

| Room pic |     Room name    | # of users |
|           Room's short description       |
{                Enter room                }

| Room pic |     Room name    | # of users |
|           Room's short description       |
{                Enter room                }
...
  • Fav Icon: Add user/room to Favorites

  • Poke user: the phone of poked user shows 'You've been poked' notification. If he is away, then tray notification is shown and phone vibrates

  • Only visible if in the same room with user:

    • Mute user: no audio will be heard from that user
    • Block user: mutes and disables chat messages from the user
      • If user is blocked by more than half of chat participants, we automatically get report about this user.
      • if a user has been muted/blocked by a lot of other users, we can block his account for some time (week, month)
    • Kick user: this button appears only for the owner of the room. When user is kicked, he can't enter the room for the next 24 hours.
  • If user blocks the owner of the room, he is automatically removed from this room

  • User also can:

    • Request a friendship from other user, if other user agrees to friendship, they can see each other's facebook profiles.
    • Publish a link to his personal room on Facebook and ask his facebook friends to join this room
    • Publish a link with invitation to his private room on Facebook

Version 2.0

Settings:

  • My Other Rooms - create, edit, remove (paid subscription)

App starts in Discover mode, which shows promoted public rooms.

Chat screen:

  • [sticker] button: brings up a popup with emoticons and fan art that user can use in chat

  • User also can:

    • Create another room (paid service) and make it public or private.
    • Owner can use this room for lectures, guidance, personal radio (songs, talks, reads), his fans meeting place, etc.
    • Public room:
      • allows more users to be present in it - up to 50
      • owner can poke ALL users at once (e.g. for important announcement)
      • owner can have different voice rights for different users, e.g. users will need permission from the owner to speak and/or chat in the room
    • Private room has the same features as Public room, but additionally:
      • requires an invitation from room owner
      • can be hidden in owner's profile

Some ideas (crazy and what not)

  • Knock-knock and locked rooms. Owner can lock a room at any time (even with other users inside). Users not in a room can knock on a door, which shows notification to owner: "User xxx knocked on your door" { Let him him } { Ignore user } { Block user }

  • Leave a room you're in right now to visit another room, but keep your place in the first room (User Avatar will show with a sign "Visiting another room"). Go back quickly (icon on top). Can be helpful when you're invited to someone's room for private chat, when you need to quickly drop by your own room, etc...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment