Category: New LabKey Server UI

19 Sep 2017

Before & After: A Side-by-Side Look at the New LabKey Server UI

The upcoming redesign of the LabKey Server user interface includes a variety of updates; some of which are focused on look and feel, some on interface behavior, and some technical stability. All of these changes and enhancements were carefully selected because of the contribution they will make to the overall usability of the platform. Prior to the release of the new UI as part of LabKey Server v17.3, we wanted to give users a side-by-side look at some of the key updates and how they will differ from the current UI.

Landing Page

Many of the key changes to the LabKey Server UI can be seen upon your arrival on the LabKey Server landing pages. The new interface features an updated header style with a more compact navigation and reorganized menus, the addition of a new “frameless” webpart style, and updated logic that will hide the tab bar on home projects if there is only one tab present.

Page Administration

In order to reduce the visual noise and present a cleaner UI for administrators, we have introduced a “page admin mode.” Options like “add web part” and tab editing will no longer be presented at all times and will instead only be visible when the user turns on page admin mode. Page admin mode can be easily turned on when edits to a page are needed and turned off when edits are complete.

Data Grids

Several changes have been made to the LabKey data grids in order to declutter the grid navigation and increase readability. The most notable changes include the introduction of a more icon-driven button bar with tooltips for each action available on hover, a simplified “edit” link presentation, and the addition of row highlighting.

Grid Customization

The customizing grids of data has been simplified in the new LabKey Server UI. With this update, filters and sorts added to a grid are always carried with view and no longer require an opt-in. Additionally, filters can be quickly edited using one click to reopen the filter pane or removed with by clicking the newly added [x] icon next to each filter definition.

Menus

Updates to the LabKey Server menu are both visual and technical in nature. A major shift included as part of the redesign is the transition to menus written in Bootstrap instead of Ext, that take advantage of Bootstrap’s consistent styling and built-in behavior for multiple form factors. Sub-menu behavior has also been updated so that sub-menus now replace the menu content (with a back to menu option) instead of appearing next to the primary menu. This change makes the navigating to 2nd level sub menus a much cleaner experience, as users navigate within one menu frame instead of 3. Finally, type-to-filter functionality has been added to the menus with greater than 10 values. This can initially be seen in the “More Modules” list as well as the “Grid Views” list.

12 Sep 2017

Key Steps for a Successful UI Transition

Whether you’re implementing a brand new software solution or updating an existing solution, changes that affect the workflow of team members are often a major pain point for organizations. Taking steps to manage and communicate these changes and their benefits to your users can greatly reduce the friction faced during implementation and, in turn, increase adoption by users. As you prepare to transition to the new LabKey Server UI (being released as part of LabKey Server v17.3), we encourage you to take the following steps to help manage this change and help make the UI transition a success.

Test the Redesigned Interface

Test the new interface extensively in your staging and/or test environments. As part of the 17.2 release of LabKey Server, we included the “Core UI Migration” experimental feature that allows administrators to turn on the new UI. While the interface is still in active development and certain elements may shift slightly, the bulk of the navigation changes are represented, and we encourage administrators to explore the new UI and test for:

Changes to your primary user workflows (editors, readers, administrators, etc.)
Go through the workflows of your primary users; click through the available buttons and navigate through the interface as your user would, checking for changes to their standard workflows.

Broken customizations
Check to see that customizations you have made to the interface are still functioning as expected. As part of the UI redesign, we have refactored a good portion of our own CSS in order to make it easier to maintain the platform in the long run. As a result customizations made to your server’s CSS may need updating.

UI bugs that should be reported to LabKey
Reporting bugs that you encounter during testing is an important part of the redesign process. Your feedback helps us identify and prioritize fixes that need to be made to the interface.

Identifying updates that need to be made to your server customizations and changes to your user workflows early will give you the opportunity to make adjustments and prepare for any new-interface training that might need to be done with users.

Set a Go Live Date

Decide on a date that you will make the transition to the new UI. Make sure you account for adequate time to test the new version, communicate upcoming changes and your transition plan, and train users on the new UI.

Communicate Upcoming Changes and Transition Plan

Communicating upcoming changes and their implications for your users early and often is crucial to a smooth interface transition. When communicating details about the interface transition to users, make sure to include information about:

  • Transition timeline
  • Key benefits of the transition
  • Key changes/potential areas of frustration
  • How users can ask questions
  • How users can provide feedback

Provide User Training

Some of the changes being made to the LabKey Server interface during this redesign will affect how users perform certain tasks. If you discover through testing the interface in the context of your team’s key workflows that core tasks are affected by navigation changes, then providing training on how to accomplish this work in the new interface will help avoid frustration. For smaller changes, simply documenting the new process may be sufficient training, but in cases where a user’s workflow is significantly changed a training session may be more appropriate.

Answer Questions

Even with thorough testing, communication, and training, questions from your users are still inevitable. Develop and communicate how users can ask questions as they are are adjusting to the redesigned interface. Depending on the size of your team, that may mean communicating who the contact person is for questions, you may create a message board for questions and discussion, or you may host a handful of Q&A workshop sessions post-implementation. Whatever the method, making sure a user knows how they can have their questions answered will help prevent frustration when they encounter a change to their workflow.

Provide Feedback

Communicating feedback to the LabKey team is an essential part of the redesign process, and we are committed to making sure that you and your users have the best possible experience using LabKey Server. As you explore the redesigned interface in your test environment as an experimental feature, you can provide feedback using the “Give Feedback” button in the top right corner of the interface. You can also provide feedback directly to your LabKey account manager.

Related Resources

01 Aug 2017

FAQs: LabKey Server Redesign

In the 17.2 release of LabKey Server, we included an experimental feature that allows teams to explore the beta version of the redesigned LabKey Server UI (scheduled for full release as part of v17.3). The key priorities for this redesign are to transition the platform to using modern technologies that will increase its stability and ease of use, and to respond to user feedback about areas of the platform that needed to be reworked to better support today’s users.

As you explore the new UI, we encourage you to provide feedback about the design and any technical bugs you come across. This will help us make adjustments during the next few months of active development before the initial release. Below are the answers to some common questions you may have when testing the new UI on your LabKey Server. We will continue to add to this list as we receive additional feedback.

Do we have to transition to the new interface or can I keep using the old one?

In 17.2, you’ll have the option to turn on the new look and feel by going to the experimental features listed under the Admin Console and enabling “Core UI Migration.” This will be opt-in, but we recommend you take a look now and provide feedback!

Since this turns the new interface on for all users, and this is still undergoing significant development, we recommend that you turn this on first on your test and/or staging server(s) and not yet on production.

With the 17.3 release, all installs will be moved to the new interface and the old UI will no longer be available for use.

What will happen to my custom CSS when we switch to the new UI?

To support the redesigned UI we are utilizing the standard Bootstrap framework and refactoring a good portion of our own CSS in order to make it easier to maintain the platform in the long run. It is likely that your custom CSS will need updating as a result of these changes.

We recommend that you move your staging server over to the new UI as soon as possible in order to evaluate and update any custom CSS that does not render correctly in the interface. If you are a Premium Edition client, contact your LabKey account manager if you need support making these changes.

Why does my site logo look broken?

By default, the 17.2 release uses the Seattle theme, which has a dark blue bar at the top of the header. Logos that use transparency may look wrong if they were previously on a white background. To fix this, you either upload an alternate version of your logo that will render well on dark background or you can switch to the Seattle Light theme which has a white top bar by going to Admin Console and adjusting your Look and Feel Settings.

Can I change the colors used in the interface?

In the beta release of the interface with v17.2, there are two default theme options to choose from: Seattle and Seattle Light. With 17.3, we expect to have the full suite of themes available for use, with a light and dark version of each. Additionally, you will still have the option of writing custom CSS.

We plan to introduce additional customization options as part of future releases that will allow you to more easily change change specific variables without writing your own CSS.

How do I add webparts to my pages in the new UI?

In order to streamline our page controls, we decided to make those that are used less often only show up conditionally. Most of our administrative controls are now available only when you go into admin editing mode. To turn this on, you can go to the admin dropdown and select “Page Admin Mode” (provided you have administrator permissions):

LabKey Server Page Admin ModeWhile this editing mode is on, you have the ability to add, move, or remove webparts and adjust page tabs just as you did in the previous versions. You can exit this mode by clicking on “Exit admin mode” in the header or in the admin dropdown.

LabKey Server Exit Admin Mode

I found a bug with the new UI. How do I report it?

You can report bugs using the “Give Feedback” link in the top right corner of the new UI. This link will redirect you to a feedback form on the LabKey Support Portal where you can report issues as well as general feedback. Please provide clear steps on how to reproduce bugs you encounter so that we can appropriately investigate and prioritize changes to be implemented in the 17.3 release and beyond.

I use ExtJS 4.x in my applications, why does my view not show up in the new UI?

With the introduction of the new UI we were able to move away from ExtJS 4.x for rendering menus. This was the last “site-wide” dependency we had on ExtJS, however, we still continue to use it throughout the product in different views, reports, and dialogs. To manage these usages we use our dependency framework to ensure the correct resources are on the page. The framework provides a variety of mechanisms for module-based views, JavaServer Pages, and Java.

If your applications do not declare their dependencies, it is likely they will fail to load when they are loaded independently (without other views/apps on the page that might be declare the same dependencies).

13 Jul 2017

LabKey Server Gets a Refresh

At the beginning of the year, we shared that a redesign of the LabKey Server user interface would be one of our development priorities for 2017. The decision to redesign was made based on a variety factors, with two of the key drivers being the need to:

  • Evolve our platform to utilize modern technologies and interaction patterns, ensuring stability and ease of use
  • Respond to user feedback about aspects of the LabKey Server interface that could be reworked to better support the needs of today’s users

As we prepare to release the beta version of the new UI as an experimental feature in LabKey Server v17.2, we wanted to take a few minutes to share about the approach we have taken with this project, our core design principles and priorities, and what to expect in the initial release (and beyond!).

Starting with Our Users

We kicked-off this project by hosting a series of sessions to observe the way our users interacted with the current UI. During this process, we noticed many of our users employing workarounds to accomplish particular goals. Often times these users were not aware that they were using a workaround as opposed to an intentional path, they were just operating in the manner they had discovered to overcome the quirks of the system. This was eye-opening and drew attention to the need for greater clarity in our navigation.

We also learned in talking with users during this initial investigation, that more labs than ever before are using tablets as their primary tool for data entry. This reinforced the need to ensure that LabKey Server works smoothly regardless of the type of device it is being used on.

Core Redesign Principles

When we began to work on developing the new interface, we committed to a set of core principles that would help guide the design:

Focus on the User

Make it as simple as possible for the user to accomplish the common tasks that make up the majority of their interactions with the platform. Employ the 80/20 rule to optimize the small number of interface interactions that make up 80% of our usage.

Design for Consistency

Take a holistic approach to the way we design features to ensure that they follow consistent navigation and design patterns. This helps users more intuitively navigate different features of the the application.

Make Changes that Matter

Be conscious during the redesign to not make changes to how users interact with LabKey Server just for change’s sake. Make sure each change will help improve the overall user experience or increase the ease of accomplishing a specific user scenario.

Optimize for the Modern Lab

Design each component for the smallest screen-size first to ensure that LabKey Server will scale elegantly to the size of the screen on which it is being viewed.

Key Areas of Focus

Knowing that we couldn’t tackle every feature in one release, we had to prioritize what to address in the initial phase of the redesign. Our goal was to focus first on changes that would provide the greatest benefit to our entire user base.

We decided to focus first on reworking the interface navigation, data grids, and administrative pages with the goal of making it easier for users to find the options that apply to them, without a lot of noise from scenarios they may never touch. To address the need for responsiveness, we also transitioned LabKey Server to the popular responsive web interface framework, Bootstrap.

What to Expect

The redesigned UI will make it easier to accomplish common scenarios through prominent placement and easy 1-click access. Less common user scenarios are built-into the interface as secondary actions, but with a clear navigation path to accomplish them.

With such a wide range of use cases for LabKey Server, this will mean that in some cases an action that used to be one click is now two. This might feel counterintuitive when first interacting with the redesigned interface, but by streamlining the interactions that are most integral to general usage, we are able to make the software easier to navigate overall.

Release Timeline

Administrators will be able to explore the in-development UI as an experimental feature in LabKey Server v17.2 (check out the demo below!). We encourage teams to test the UI in their test or dev environments and provide feedback to the LabKey team using the “Give Feedback” link in the product UI.

The initial version of the redesigned UI will be included in the 17.3 release of LabKey Server (scheduled for distribution November 2017). Additional enhancements and updates will be included in subsequent releases.

Stay Up to Date

Over the next few months we will be providing resources and recommendations to help teams prepare for the transition to the redesigned interface. Subscribe to the LabKey Blog to receive emails when new resources are available.

CONTACT US