Design
 Completed
 

Description

Requirements

UC: Display the application type (blog, etc.)
UC: Display the event type (create, edit, delete, comment)
UC: Display individual and combined events. The grouping can be done by page, by user, by time, etc.
UC: Provide links to the event changes / details

User vs. Event Focused

  • Grouping is per page / per event type

User Focused

Event Focused

  • Users are highlighted
  • Type Order
    • User avatar is primary
    • Event type is secondary
    • App type is tertiary
  • Issue: participants avatars not displayed when grouped 

userFocused.png

eventFocused.png

  • Events are highlighted
  • Type Order
    • User avatar is missing
    • Event type is primary
    • App type is secondary
  • Issue: no avatar is displayed, relying on reading the user names
  • Issue with cropped user names
    • avatar helps with recognition
    • full user name in the event description
  • Avatars aligned
  • Participants avatars displayed on details expand
  • Explicit event types

userFocusedDetails.png

eventFocusedDetails.png

  • Issue with cropped event types
    • event icon helps with recognition
    • event description lists a single event type
  • Event icons aligned
  • Participants avatars displayed on details expand
  • Short / more cryptic event types
  • Removing cropping make the missing elements more explicit, but breaks a bit the layout

userCentered_uncropped.png

eventCentered_uncropped.png

  • Removing cropping make the missing elements more explicit, but breaks a bit the layout

Other Iterations

Description with small avatars

  • Prototype
  • Added small avatars for participants so that it's not needed to expand
  • The issue is that the UI gets crowded with lots of small visual attention grabbers

userCentered_smallAvatars.png

eventCentered_smallAvatars.png

  • Prototype
  • Also used grouping messages + displayed only avatars without the user name in order to try to simply the UI
  • This variant showcases small avatars in description and also uses the event focused description layout

userCentered_smallAvatars_reverse.png

eventCentered_smallAvatars_details.png

Description with avatars on left

userCentered_description_avatarsleft.png

eventCentered_description_avatarsleft.png

Type icon with small avatars

typeIcons_avatars.png

  • Prototype
  • Type Order
    • User avatar is secondary
    • Event type is primary
    • App type is tertiary

typeIcons_avatars_details.png

Applications events

  • Type Order
    • User avatar is primary
    • Event type is secondary
    • App type is tertiary
  • The app type is very small and almost unreadable

user_app.png

event_app.png

  • Type Order
    • User avatar is missing
    • Event type is primary
    • App type is secondary

event_app_primary.png

  • For applications we could change the type priority order and showcase the app icon as primary

event_app_primary_extension.png

  • Who is the event sender? The Blog App or the Extension Manager?
  • The Blog app is not mentioned in the icons, just in the event description. The layout will be generic for all the upgradable applications.

 

Tags:
Created by Ecaterina Moraru (Valica) on 2017/10/27 11:54
    

Get Connected