Valentyna Kuzmych
  • UI Semasio
  • 1. First look for newcomers, general info about service, button Login (maybe "Sign in/Sign up"), fake tags on the background to drop a hint about service.

  • 2. Autorization (popup window with inputs).

  • 3. Asking for UserId to visualize User's profile. Help bar apperars on the scene. Top right also can be used for any additional info. Now I put there Setting (Account details, CSS skin, ect) and Localization (Languages, Countries), there may also be FAQ, Help, profile card ect.

  • 4. Visualizing of User Profile in tag-cloud form (probably there should be an option for different styles of tag clouds). Tabs apperars on the scene. I used tabs for navigation as it's the most common and understoodable UI navigation tool.

  • 5. UserActivity. The same tag-cloud, table with visited sites is added and also I added in this part timeline to limit visited sites to some period (to ease searching). But I'm not sure that I understood functionality correct.

  • 6. TimeLine - the main UI part is ruler with time period. Person uses it for navigation - first he/she needs to choose period (day/month/year), then point start and end date (green pins or calendar dropdown). Then we have linestripe of days (or months or years) devided with the organic period. Browser window is able to show only 3 snapshots. To navigate for more just use Blue pin to point day on timeline and Script will show you this day and the one next and before + previous and next buttons for going further.

  • 6a. The same as 6, but with lighter color schema.