[Discuss] Stratos Console UX Improvements

[Dakshika Jayathilaka <da...@wso2.com>]

Hi Devs,

I'm working on new UX(User Experience) improvements based on initial design
and implementation started by Rukmal [1][2]. Initial design is based on *metro
*concept including context based navigation system.

If i summarized previous discussion we are focusing on three major roles
including,

   - Stratos Admin
   - Tenant Admin
   - Tenant User

Based on the role implementation, characteristics of our intended target
group has changed. Now we need to focus on different technical levels and
need to incorporate latest design trends on UX industry to compete with
competitive products. After analyzing and discussing with Rukmal and Shiro,
 I came up with improved UXD for Stratos. Let me explain design rationale
behind the UXDs.

*General Considerations:*

* Flat design concept to improve end user experience
* Minimalize approach to Highlight key points
* Cross Device compatibility

*Design Specific Considerations  *

01) Navigation Structure (Screen: 002_Navigation.png)

*Initial design*:  Include context based menu switching. Home page doesn't
contain any menu and you can access content via metro blocks. once you
click on first screen you can see secondary menu on top. Once you go
through any of metro links on second page, you can see collapsible left
menu and you can use that to return back to previous level links.

*New UXD: *If you consider previous approach it doesn't include consistent
menu structure, If we include menu on different positions users may get
confused on the structure and affect to mind maps on users cognition. New
UXD includes collapsible left menu  which includes all available options
per particular user role. Then users can easily identify their role based
permissions without much effort.

02) Improved Metro Blocks (Screen: 001_Apache_Stratos_Home.png)

*Initial design: *Include metro blocks to make elegant and user friendly.

*New UXD: *Includes same metro block concept and added few additional
improvements.  Users are expecting logical separation in between different
metro links. so i have added separator and consistent main block for
populate metro based navigation. This will improve UX on handheld devices.

03) Breadcrumb (Screen: 002_Navigation.png)

In new UXD, i have added breadcrumb to improve UX. Now Users can easily
identify things that their doing and they can use breadcrumb to access
previous levels easily.

04) Forward/Back button pattern improvements (Screen: 004_sticky_header.png
)

*Initial design: *Includes *Forward/Back* button pattern on bottom of
action pages.

*New UXD: *When we are adding action buttons on design we can use two
options. Either Reading Order or Forward/Back. IMO Forward/Back is much
appropriate on our context. The alignment of the buttons can influence the
perceived paradigm of the user. As such some combinations of alignments and
positions can be conflicting and thus confusing for users. New UXD align
buttons to right with considering above mentioned facts.

05) *Fixed to Top(Sticky)* action buttons (Screen: 004_sticky_header.png )

*Initial design: *Includes page bottom based action buttons. But in our
context some pages may getting lengthy. So user need to scroll page and hit
action buttons. If we consider muti-device screen resolution its really
irritating action.

*New UXD: *Contain simple, top positioned action buttons to avoid
inconsistency between different sections. Once page grows action button bar
automatically stick to top and content can be scroll on lower index level.
 with this small change users can easily perform the form actions.

06) Grid / List switching on content listing(Screen: 003_listGrid.png)

Stratos contain multiple listing pages like partitions, deployment
policies, cartridges, subscriptions so on. Metro blocks are grid styles and
its better to have switch option between grid and list, cause long listing
with grid may not appropriate and less user friendly. New UXD include Grid
/ List switching option to prevent mentioned issues.

07) User Onboarding

With improved UXDs we need to think about proper user onboarding option.
collapsible navigation may add some confusion when onboarding users. So i'm
planning to add on screen guide to avoid confusion and make much
comfortable on new UXD.

Any comments/suggestions regarding the new UXDs are highly appreciated.

Thank you,

[1] [Discuss] Role based access and functionality for Stratos
[2] https://github.com/rukmal/Stratos-UI

Bst Regards,

*Dakshika Jayathilaka*
Software Engineer
WSO2, Inc.
lean.enterprise.middleware
0771100911