tangoe matrix sprint 15 usable and light weight user interface demo - sep - 2014-new

© 2014 Tangoe, Inc.© 2014 Tangoe, Inc.

Matrix Sprint 15Infrastructure Topics +

UI & UX Fixes…Stakeholders Demo

12th September 2014

© 2014 Tangoe, Inc.

Powering the Connected EnterpriseMeet Matrix

Turn On. Manage. Secure. Support.

2


Powering the Connected EnterpriseMatrix Sprint 15 UI Optimizations Checklist…

Optimizing Web Fonts Rendering Performance – DoneNew UI for Bill View & Account Audit Compliance Audit Details - Done(Alert), Info, Success & Error Message Enhancements – DoneContext Menu Enhancements – DoneHelp & Info (About) Icons on the Header – DoneStabilizing the Main Menu in all the 3 levels – Partially CompletedStabilizing the Tenant Switcher – Partially CompletedImplementing Sprite Icons & Images (.png, .webp, .svg & .woff) – Partially CompletedDetail Grid Enhancements – Partially CompletedAccordion Enhancements – Partially CompletedModal Window Enhancements – Partially Completed

3



4

Advance Search UI Enhancements – Partially CompletedWizard Steps Enhancements – Partially CompletedText Field, Dropdown, Split Buttons, Normal & Active Buttons Enhancements – Partially CompletedEnhancing the Matrix Help – Partially CompletedUsing a Light Theme to avoiding Latency Issue – Partially CompletedAvoiding Complex Custom Layouts – Partially CompletedRefining the Sass & CSS Rendering Performance – Not Yet StartedRefining the jQuery Rendering Performance – Not Yet StartedMxBillImport – Bill Loading UI Enhancements – Not Yet StartedAsset Template – Drag and Drop UI Enhancements – Not Yet StartedNew Login Page for Matrix – Not Yet Started



5

Identifying USER ACTION area, and concentrating for better UI Enhancements – Partially CompletedApplying Usability Heuristics for Matrix UI and making 100% Usable App – UX Activities - Partially Completedhttp://www.nngroup.com/articles/ten-usability-heuristics/

http://www.nngroup.com/articles/ten-usability-heuristics/




Powering the Connected Enterprise

6

Optimizing Web Font Rendering Performance

Introduced Open Sans Font Family (Regular, Italics, Semi bold & Semi bold Italics)

.woff – Web Open Font Format .eot – Embedded Open Type . ttf – True Type Font . svg – Scalable Vector Graphics

https://github.com/FontFaceKit/open-sans https://github.com/FontFaceKit/open-sans/commit/ea61437e6fa31b527e4ac5623b24f273965f8e15 https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

Been implemented…

Benefits of Optimizing the Web Fonts : Avoiding Latency Issues, Multilingual and Multiple Device Supports & Crisp Look…

https://github.com/FontFaceKit/open-sans

https://github.com/FontFaceKit/open-sans

https://github.com/FontFaceKit/open-sans/commit/ea61437e6fa31b527e4ac5623b24f273965f8e15



https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/



7

Optimizing Icons & Images Avoiding Latency

Optimizing Matrix icons for faster recognition and avoiding latency Planning to introduce WebP - Lossless, WebP - Lossy and Alpha

Open Source Royalty free Compression Technology Using WebP file format instead of .png, .gif & other file format for Chrome,

because Google speeds WebP image format and brings animation support as well

http://www.w3schools.com/browsers/browsers_stats.asp https://developers.google.com/speed/webp/gallery1 https://developers.google.com/speed/webp/gallery2#reproducing_the_images http://cloudinary.com/blog/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth

Ready to be implemented

Benefits of Optimizing the WebP: It’s a new technology file format recently introduced by Google, making the web faster and avoiding latency issue. But unfortunately, the WebP file format supporting only Google Chrome & Opera, for IE and Mozilla will still only supports PNG. The same way Google also playing with different browsers. For example, if you open YouTube in Chrome, you will be getting it WebP Sprite Icons, the same URL if you are opening in IE, you will be getting it PNG Sprite Icons. But comparing to both file format, WebP is lesser file size and better quality. Even WebP file format has 2 different quality as well. 1. Lossless 2. Lossy and Alpha.

And one more good thing with WebP extension, it’s supporting Animated file format as well. Now a days most of the Game Developers going with WebP file format to getting their Game App more faster than previous.

In 3 ways, we can convert the WebP format…

http://www.w3schools.com/browsers/browsers_stats.asp

https://developers.google.com/speed/webp/gallery1

https://developers.google.com/speed/webp/gallery1


Powering the Connected EnterpriseMatrix Sprite Icons (.png & .webp) Comparisons

8

File Dimension : 673 x 970 & Size : 149 KB File Dimension : 673 x 970 & Size : 63 KB

WepPpng




9

Refining the Sass & CSS Rendering Performance

Use Any Declaration Just OnceAlphabetically Sort DeclarationsSort and Group by SelectorsSimple Rules for Better Organization and More Efficiency

FutureSuggestion…

.field-button-split -khtml-border-radius: 3px -moz-border-radius: 3px -ms-border-radius: 3px -o-border-radius: 3px -webkit-border-radius: 3px background-color: white background: -moz-linear-gradient(top, white 0%, #f4f7f9 100%) background: -ms-linear-gradient(top, white 0%, #f4f7f9 100%) background: -o-linear-gradient(top, white 0%, #f4f7f9 100%) background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f4f7f9)) background: -webkit-linear-gradient(top, white 0%, #f4f7f9 100%) background: linear-gradient(to bottom, white 0%, #f4f7f9 100%) border-bottom-right-radius: 0px border-radius: 3px border-top-right-radius: 0px border: 1px solid #6c7680 cursor: pointer display: inline-block filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f7f9',GradientType=0 ) font-family: Open Sans font-size: 12px height: 22px margin: 0px padding-left: 10px padding-right: 10px vertical-align: top


Powering the Connected EnterpriseRefining the jQuery Rendering Performance

10

Into R&D - Refining the jQuery Rendering Performance & Smooth Interactions…

FutureSuggestion…


Powering the Connected EnterpriseIdentifying User Action Area For Better Enhancements

11

Currently identifying the User Action Area and will do the need in upcoming Matrix Sprint Release…

FutureSuggestion…



12

Approved Prototypes Are Ready For Future Sprint

Location Map Live Google Map

Design For Optional…

Bill Loading Process

Ready For Implement…

Bill Loading Process


Asset Template Drag & Drop




Powering the Connected EnterpriseLogin Page: Waiting Approval For Future Sprint

13

Matrix New Login

Waitingfor approval…




14

Login Page: Waiting Approval For Future Sprint

Matrix New Login

Waitingfor approval…
