Tuesday, November 7, 2017

EB GUIDE 6.5 – UI makeover

Magdalena Cullmann

Magdalena Cullmann is one of our UI/UX experts.

Whether you work with EB GUIDE 6 on a daily basis or are a less frequent user of the tool, your first glimpse of this version of EB GUIDE is definitely going to surprise you. As you might be aware, we’ve made a number of significant changes to EB GUIDE. For me though, as a user experience designer, the biggest change has been the user interface.


You spoke. We listened. We acted.

The results of several usability tests that we conducted and feedback that we received from you, our users, had a crucial impact on the UI makeover of EB GUIDE 6.5. You said you would prefer a layout that you could customize. So with EB GUIDE 6.5, we’ve made our layout flexible. For example, the navigation and content areas are now separate panels that we’ve named as ‘components’. This means you can now work on more than one monitor, moving components around and placing them in places in the UI that is most convenient to you, creating a UI that is customized to suit your modeling needs.

You can now focus on your task at hand while hiding, closing or even moving anything that is not necessary. For example, if you are going to create and rework templates for the rest of the day, you don’t really need the Events component. You can simply auto-hide it or even close it to avoid distraction, gaining more space for the other components that you might actually need.

Talking about events – we’ve removed them from the navigation tree to make it more manageable and the handling of events more efficient. You can forget about scrolling to add new events. Simply use the “Add” button that is right there whenever you need it. The same applies when working with datapool items.


A balanced project overview

As you develop your project, the number of elements grows rapidly, the structure of the widgets gets more complicated and you might find yourself needing help to make your way through the structure. While the navigation tree still depicts the structure of your states and widgets in its entirety, you can now use the Outline component to view the content of the currently active editor tab.

Switching between Navigation and Outline is a thing of the past. Now these components are available and visible at the same time, helping you keep an overview of the whole project while allowing you to focus on the part that you want to concentrate on. This eliminates any extra mental workload and distractions that you may encounter.


For all you beginners out there

Our community of EB GUIDE users continues to grow daily. To help all you newbies get started with modeling, we’ve added some helpful hints to the UI. Drop-down boxes for selecting language and skin are labelled. When hovering over an icon, a tool tip that explains the use of the said icon pops up. For instance, in the example below, brown indicates that language support was added. Quite obviously, if you are new to EB GUIDE, this isn’t something you know right away and so the tool tip keeps you informed.


Stylish, streamlined, sophisticated

With this version, we’ve built on the efforts we put in with the EB GUIDE 6.0 release and ensured the UI looks both stylish and streamlined. We’ve restyled our icons completely, focusing on practicalities. First, we specified style, sizes, colors and line widths. Then, we ensured the icons look like they belong to one icon set. And finally, we made sure icons continue to be recognizable in all sizes by reducing the level of detail. See example below.

One problem we were constantly running into with previous versions was the visibility of icons. In the past, we used multicolor icons. These worked as long as they were placed on one background color alone. But when working with EB GUIDE different backgrounds of different colors are used, which made it quite challenging to find appropriate color combinations and to even see the icons. For example, in the Search overlay shown below, you could select the rectangle to get more information. After you selected the rectangle, a part of it vanished.

After the makeover, the color of selected icons matches the color of the font, ensuring that all parts of the icon are now clearly visible. See the ‘After’ example above. Another update we made was the inclusion of the ‘Refresh’ option in the Search results overlay – again, see the ‘After’ example above. To refresh your search results, simply click on the icon without having to retype your string search.


Start modeling now

As always, we are constantly looking for ways to improve the tool.

Download the latest version of the tool, try it out and send us your feedback.

Also, don’t forget to visit our Resources section to download examples, review tutorials and read user documentation.

As always, get in touch with us if you have questions or feedback.