Publiez un concours

Improve UI element

État: Closed
Prix: $200
Propositions reçues: 11
Gagnant: KrisD87

Winner

Résumé du concours

We provide a software to record and replay user sessions on web-applications. When a session has been recorded it can be replayed. For this functionality we use a so called panel (see screen-1.png) that is displayed in the top area of the browser. Below it the recorded session is replayed. This contest is about improving the panel from a usability and design perspective.

Important criteria:
- The panel is self-explanatory (easy to use)
- The buttons and other elements are easy to read
- The panel is visually appealing
- It matches our CI/CD. Check http://www.qumram.com/ to get an impression of the CI
- Needs to be compact in size (as below it there should be as much space as possible for the session replay)

To see what session replay is about you can check the following movie:
http://bit.ly/179JeGR
It shows how a recorded user session replays. The player is still a mockup version but it gives a good idea what replay is about.
Also check competitor like http://www.inspectlet.com/

What is important to understand is the following: A session can contain multiple page views (aka a user navigating through a web site and moving through pages). The recording happens by just capturing distinct page views or the page-view and everything that's going on in the users browser. A session replay can be a step-by-step replay (moving from page view to page view) or a more movie-like replay (showing the users interaction as in the movie above) or a mix of both.

In screen-1.png, each dot in the strip running from left to right represents a distinct page view, while a bar with a small player triangle in it is a page that has client-interaction replay activated. The UI needs to be able to mix these two elements. While the session proceeds in replay this strip moves from right to left, keeping the currently active page-view or replay position in the middle of the strip.

The buttons above the strip have the following meaning:
- information (show information about the currently replayed session. See screen-2.png for an example)
- zoom out and zoom in (this defines the zoom factor of the strip - either showing more of the session at a glance or being able to more precisely navigate in a session; think of google finance).
- Replay speed (single, 2x, 4x, 8x, 0.5x)
- Jump back to last page view (or replay bar)
- Stop
- Play
- Pause
- Jump to next page view (or replay bar)
- Current playback time of session (from the session beginning)
- Resolution selection for playback. Original, iPhone 6, iPhone 6+, iTab, Desktop 1920x1200, ....
- Title of the page-view currently replayed
- Time of currently replayed element (same as playback time but this time the absolut date time value and not just the time difference to the beginning of the session)
- Dropdown-Menu (far right corner). Including things like logout, back to sessions list, change UI language, Extend/Collapse panel, etc. (not so important here)

The screen-3.png shows what happens if many distinct dots are on the very same spot. In case of a mouse it zooms in and on a mouse out it zooms out.

The set of functionality needs to be supported (more or less). Additional functions that make sense can be introduced. Also the overall concept of the strip (or basically everything) can be changed. What has to be met are the criteria given above and the capability to see as well distinct page-views and replay elements that form a session in the same view. So the basic idea behind the strip allowing to navigate over all the page-views and movie-parts that belong to the session over it's entire duration needs to be kept (albeit maybe with a different implementation from an User experience perspective).

The result can be
- Either just a visually more appealing overhaul of the current concept (delivered as easy to use photoshop file or similar)
- Or a completely or partially different panel element (visually and user experience changes) also delivered as photoshop (with