UI UX

Question 1

An Introduction to Layout

Layouts specify what comes where on a page, and provide you with greater flexibility and reusability when it comes to application design. Each page is based on a layout. The layout contains widgets and structures that repeat on every page based on that layout. For example, your application logo, if you placed it into a layout, will show the application logo on any page that uses that specific layout.

The basics of a Navigation Layout

A layout consists of the following important components:

Scroll containers

Scroll containers are used to divide the layout into individual regions e.g. header, sidebar and footer regions, and set the scrolling behavior for those regions. A scroll container must be the only top-level widget which means that you’ll always need to start with a scroll container when structuring your layout. Aside from that, scroll containers can only be placed directly into another scroll container.

Question 2

Contents

The contents cover everything that should be present in every page that uses the layout, from navigation bars to sign out buttons.

Placeholders

These are the empty areas that form the canvas for any pages that make use of the layout.

When we create, a page based on a layout, the layouts’ content remains the same while the placeholder areas cover what is unique to the page. Note that Mendix dictates that at least one placeholder is named ‘Main’.

Question 3

Master layout

A layout can be based on other layouts, in which case the parent layout is referred to as the master layout. If a layout has a master, it can use the placeholders defined in the master to create a more specialized configuration. If a page is based on this specialized layout, you can only make use of the placeholders defined in this new layout, not the ones of the master layout. Master layouts provide even more reuse in the design of your applications and lead to better maintenance in your project. By utilizing reuse through Master Layouts, you incorporate the principle of DRY (Don’t Repeat Yourself) into your project, reducing duplication of elements you’ve already created. Enabling you to stay in control of your design and its maintainability.

For example, if your master layout only defines a header and the derived layout (which uses your master layout) adds a side bar. Pages can then be either based on your master layout or the derived layout, with changes made to master layout being reflected on any page which uses one of these layouts.

This chain of layouts can be as long as is necessary, although in keeping with UX design practices and the value of simplicity (an important value in UX and UI Design), we advise a maximum of 3.

Layouts are popping up everywhere

Layouts are everywhere in Mendix, even pop-ups have them. There are also specific layouts for tablet and mobile. There are six specific types of layout:

Responsive

Used for page layout that will respond in size and design to work across a range of devices.

Tablet specific

Used for specific tablet pages if the responsive option is not sufficient or if you are designing just for tablet experience

Mobile specific

Used for specific mobile pages if the responsive option is not sufficient or if you are designing just for mobile experience

Modal pop-up

Used for pages that should appear as a modal popup. By modal we are describing a blocking (you can’t use the underlying page until you close the pop-up) popup window that is displayed on top of the current page.

Pop-up

Used for pages that should appear as a non-modal popup. By non-modal we mean a popup that is a non-blocking (you can still use the underlying page) window layered on top of the page you were looking at.

Legacy

Layouts that have been created using older versions of Mendix.

How layouts work?

Aside from defining where each piece of content is placed in a page. Layouts define the overall scrolling behaviour of the application. What happens if a page is bigger than the screen the user is viewing it on? Does the entire page scroll up and down or does the navigation bar remain at the top?

Apart from that each time you open a new page in the browser, content found in layouts e.g. a company logo or footer is not reloaded if the layout is re-used by the new page you have requested. For example, if you transition from the Home Page to the Orders Overview, which both used the layout Sidebar Full Responsive, the placeholder contents are refreshed but the layout content, that of the side bar and the application’s logo, are un-changed. This allows for navigation between pages without losing valuable input or costly page refreshes on elements that do not require one.

Mendix will automatically detect if pages share layout. With the same applying for nested layouts, if two pages have different layouts but share the same master layout, the sub-layout will refresh but the master layout will remain unchanged.

Question 4

Designing a flexible UI with Layouts

There are four main elements used in the creation of a layout:

Scroll Containers

Regions

Placeholders

Inheritance.

Scroll containers

A Scroll container is used to divide the layout into different regions e.g. header, sidebar and footer. It is the most important widget when building a layout. A Scroll container always has a center region and optional header, footer and sidebar regions.
Regions

Regions divide the layout container into sections to position the layout elements in specific positions. Each region could contain: a placeholder, a widget or a combination of widgets.

Placeholders

A placeholder can be used in a layout to define a specific area that can be used in your page for showing your information to the end-user.

A second application for this area is in combination with a derived layout that uses this as its main layout.

Inheritance

A layout can be based on another layout, called its Master Layout. If a layout is based on a master layout, the layout can fill the placeholder areas defined by the Master Layout and define new areas using new placeholders. Pages that use a layout based on a Master Layout will only be able to use the areas defined by this layout, not those of the Master Layout.

Scrolling behavior

Using the Scroll behavior property of a Scroll container, you can determine what happens when the content of a region does not quite fit the region. There are two options available:

Per region (Default) – When selected every region will show its own scrollbar when its content doesn’t fit.

Full Widget – When selected the layout grid will grow to fit the content and will leave scrolling to its parent.

The Value of Layouts

Layouts are used to structure the user interface of your application; helping to quickly create familiarity with consistent layouts and maintainability through the reuse of layouts. Familiarity breeds less head scratching, the more familiar we are with something, the less we must think to figure out how to respond. It’s for this reason that we know what to do when we encounter a door – we instinctively reach for the door knob instead of kicking down the door. This is a basic human trait, to seek the easiest path, the one with least resistance.

Each layout we create has the potential to be used thousands of times repeatedly, reducing the maintenances of your design, as one change made in your layout subsequently can be applied to all pages that used that layout. For instance, if ten pages use the same layout and you want to add a left sidebar, instead of making that in ten places you make it in one place to the layout, thus saving you valuable time and effort in making engaging and beautiful user experiences.

Question 5

There are currently three types of menu widgets available for you: the Menu Bar, the Simple Menu Bar, and the Navigation Tree.

Question 6

Menu Bar Two level deep

The menu bar is a configured menu, with the appearance of a horizontal bar with items. Items can have sub-items in which they are shown as a dropdown, that can be expanded. A menu bar can only support two level deep navigation; sub-items cannot have their own sub-items. Every menu item points to either a page or a microflow which is triggered on click.

Question 7

Navigation Tree Three level deep

The navigation tree is again a configured menu, but in the form of a tree. Items can have sub-items like the menu bar, but the navigation tree is not limited to two levels, it has an additional level, therefore supports three level deep navigation.

Question 8

Simple Menu Bar One level deep

The simple menu bar, simple in functionality in only supporting one level deep navigation, with items not having sub-items. But not in design being able to support both horizontal or vertical navigation. Items on this menu are configured with images and captions. Being one level deep makes the simple menu bar ideal for mobile use, where user interaction and clicks are at a premium.

Question 9

How Do You Create a Typographic Hierarchy?

There are a few basic methods for establishing a typographic hierarchy in your application using size, weight, color, and position. These methods are most commonly used in combination with each other.

Question 10

For example, you can use col-xs-* class to create grid columns for extra small devices like mobile, similarly col-sm-* class for small screen devices like tablets, col-md-* class for medium size like desktops and col-lg-* for large desktop screens.

Question 11

Box Behavior

The property of Display has an impact on how the box behaves in terms of page flow, and its relation to other boxes on the page. The three values we will be covering here are Block, Inline, and Inline-Block.
Block

Block-level elements block the full width of their parent elements
They prevent other elements from appearing in the same horizontal space
The width & height property can also be set

Inline

Inline elements only take up the amount of space necessary to display their content
The height and width of these elements cannot be changed in the CSS
Inline elements will sit side by side

Inline-block

Inline-block display combines features of both inline and block elements.
Inline-block elements can appear next to each other
their width and height properties can be set

Question 12

2.5 Border

A border is a line that surrounds an element. Borders can be set with a specific width, style, and color.

Width: use pixels to define the thickness of the border
Style: Defines how a border will look. Browsers can render borders 10 different styles
Color: Can use any format your comfortable with. The most common format is the hex code.

Question 13

Overflow

Overflow is a CSS property that controls what happens to content that spills, or overflows, outside its box. There are three variations of the overflow property:

overflow-x pertains only to horizontal or x-axis of the object.
overflow-y pertains only to vertical or y-axis of the object.
overflow affects both x and y-axis.

The overflow properties have four commonly used values:

visible: when set to this value, the overflow content will be displayed outside of the containing element.
hidden: when set to this value, any content that overflows will be hidden from view.
scroll: when set to this value, a scrollbar will be added to the element’s box.
auto: when set to this value, a scrollbar will be added to the element’s box on the y-axis when the content exceeds the box.