DEV Community: Jouan Marcel

The breakdown of a textbox

Jouan Marcel — Thu, 19 Dec 2019 14:14:26 +0000

The breakdown of a textbox

Note: This is a part of a series of articles about the breakdown of various graphical user interface elements. The first article in the series was The anatomy of a button.

Textboxes are the most common way of allowing the user to provide text-based inputs. Therefore whenever language is involved a textbox will be viable. This article will give a breakdown of the many details that are accompanying the rectangular and inconspicuous boxes into its characteristics, variations, technicalities and usages.

Characteristics

PLACEHOLDER

A placeholder is a text inside the textbox, which indicates or demands the required input from the user. A label for an e-mail textbox for example could take the forms of “E-Mail”, “your@mail.com” or “Enter your e-mail address”. It’s usually grayed out or faded for the distinction of the actual input text and disappears once the textbox is in focus or has the first character typed in.

Two placeholders: The first one is exemplary, the second is imperative (Spotify on MacOS)

LABEL

A label is a small text close to the textbox with multiple functions. For one, it provides a semantic association with the textbox element and lays out a descriptive denotation of what is expected as input (eg. “Username or E-Mail” on login forms). For another, it often enough provides a larger hit area to set the focus on the input element, which especially on mobile can be an advantage. In HTML a label also carries a programmatic association, which can be used by screenreaders for enhanced understanding of the input.

Google’s placeholder texts transform to their labels (google.com)

ICON

If an icon has no interactive function it acts similar to a placeholder or label, only that its association is purely visual. It can however also take the place of a submission button, that is directly connected to the text input. Examples are a search glass icon on a searchbar, or a paperplane for sending a message.

Oleg Prolov

DEFAULT VALUE

In distinction to the placeholder text, a default value is a valid input ready for submission. It’s usually set by the provider (the app or website), often because the information is already known, but should be editable (eg. the username for a registered user). A textbox in this case acts as an intermediate element sharing properties of a text and an input.

AUTO-COMPLETE

Either for convenience or for limitation an auto-complete provides the user with a selectable choice. Different to a default value is an auto-complete function, in that it is only suggesting the user possible input values, depending on the type of textbox. These can either be set by the provider, in case a limited set of options are available (eg. Cities of the World), or if other options have been typed in before that might be interesting to the user (eg. tags or search queries).

Textbox with auto-complete suggestions (google.com)

Another type of auto-completion comes from the application layer, like external software, the web browser or its extensions. These can be used for filling out contact details and login credentials known by the browser, the following word in a message, or re-suggesting already searched terms and so forth.

Variations

PLAINTEXT

The most versatile and simplest form of a textbox is a context-agnostic textbox accepting plaintext. It has no internal instruction for what is acceptable, therefore types of any texts are valid.

Textboxes that appear to be plaintext could programmatically be specialized textboxes for common text formats like emails and URLs. In this case the appearance doesn’t differ (much) from a generic textbox, however the system is aware of it and can help the user with auto-completion or a specialized keyboard layout that displays the common symbols by default, like the @-symbol for e-mails and forward slash for URLs.

Left: Standard textbox, Right: E-Mail textbox. Notice how the e-mail textbox doesn’t provide options for emojis and gifs, while the normal textbox does

PASSWORD

Passwords are a common input for login and signup screens. The display of sensitive data however often poses the undesirable consequence that the password is exposed for everyone on the screen. For this use a special textbox variation is used that obscures each character with a symbol (like “*” or “•”). Without revealing its content it allows to see the number of characters typed. Additionally, on mobile, it often displays the last character in plaintext to allow for early correction as compensation for the lack of physical feedback from touch-controlled keyboards.

Prekesh

Passwords field may also allow toggling the visibility of the characters for checking the entire input, essentially rendering these on-demand in either plaintext or masked.

SINGLE-LINE / MULTI-LINE

Textboxes only providing support for one line have the advantage that the entered information is segmented by default. This way for example a name can programmatically be distinguished from an address, and each again from its internal parts like first name and family name, or city and street name. If more structural freedom is needed or the number of possible fields isn’t known, a multiline textbox can be used. Depending on the underlying system these are either regular textboxes with a multiline option or different types of inputs; in HTML it’s the latter and therefore called textarea.

Mike Heighway

Moreover multiline textboxes have the option to display textlines that are longer than the containing box itself either by providing a scroll option or by breaking the lines into the next line. This option is commonly named word wrap. A break in the line caused by word wrapping is called a soft return and is only visually existent, while a new line from the user is called a hard return and inserted as an actual line-breaking character.

CONTENT AWARENESS

Besides the different types, there are also different purposes for textboxes that enforce or enrich the input accordingly. The purposes can span from a broad range of options, like social media textboxes that are highlighting external links as such, textboxes for programming languages may provide a syntax highlight and corrected formatting, and WYSIWYG (“What You See Is What You Get”) textboxes may translate your input into their final visible form.

Possible text recognition example (Jakub Antalík)

ENRICHED TEXT

Enriched text (or previously Richtext, and Microsoft’s Rich Text Format) is text with inherit formatting properties. Textboxes may be able to display these similar to other WYSIWYG editors. They are especially common for e-mail clients, but may also be used for blog posts and forum comments.

Tegan Mierle

Technicality

CARET

The text cursor in a textbox, which usually is a long vertical and blinking line is also called caret. It may also appear as an underscore, or as a filled rectangle in some applications. It acts as the insertion point for text and therefore has the function to navigate within the textbox. It should not be visible if the textbox is disabled or not editable.

In addition to placing it with the operating system cursor, it may also be controlled by the keyboards non-character keys, namely the cursor and modifier keys.

REACTIVE STATES

A textbox obeys the standard states of a generic screen input. In comparison to a button however it is not centered around getting clicked or activated, but much more about what happens after it is in focus. Common states of a textbox are:

Default — The natural state of the textbox.
Hover — Many textboxes only change slightly or not at all when hovering with over them. The biggest telling point will be the operating system cursor which will change to the cursor symbol. This is not the textbox caret, but an indicator for the user that there is a viable textbox input underneath, which would gain the focus after clicking on that area.
Focus — The principal state of a textbox is the focus state, only then the user is able to change its input. In this state, it also features its caret and claims keystrokes to its own context. A website or an application can also provide an autofocus option to a textbox, making it the immediate focal point.
Readonly — The content of a readonly textbox is not mutable. It then may be used as a text display or be editable to a different point in time.
Disabled — Depending on the system there might exist two different properties to disable editing on a textbox. In HTML there exist readonly and disabled, where a readonly textbox is still focusable and considered part of a form submission, while a disabled textbox is not focusable and programmatically exempt from the submission form.

Antoine Plu

FEEDBACK

If a textbox expects a certain format for the input, it may provide feedback to the user. Common methods are a red border around the textbox or a checkbox icon next to it, depending on the validity of the input; or tooltips and info texts pointing out the rules for the input (eg. “Password must contain at least 8 characters”).

Usage

WHEN NOT TO USE IT

Due to their basic and versatile functions, textboxes are one of the default ways of allowing user input. If the options are limited or the structure of data is highly constrained, more dedicated inputs will make more sense. They will help the user seeing all possible options or prevent mistyping to happen, these include:

Limited options — Binary fields (Yes/No) can be replaced by checkboxes, limited options can be presented with list boxes, radioboxes or dropdown fields.
Type constraints — Information like numbers, dates and colors can and often are stored as text, they also can exist in an unlimited amount of options. Nevertheless more dedicated input fields have these constraints integrated. A dedicated number field for example inherently allows only digits and possibly the character “e” for scientific notation.

HONEYPOT

A very special case of textboxes is used on the web, where automated spam bots are a problem for contact and message forms. Here the developer will add invisible textboxes to a submission form, that the user neither sees nor can interact with as an anti-spam measurement. A bot however will interact with it programmatically and may try to fill out the input in an attempt to fake a valid user input.

HYBRID CONTROLS

A textbox can be used in junction with other user interface elements like listboxes. They utilize the advantage of textual freedom, while still providing help and guidance for predefined choices. Typical use cases are for selecting tags, users or locations, that might or might not exists already in the system.

Textbox with enhanced features for creating, searching and editing tags (MagicLab Design Team)

Let us know in the comments which GUI element you want to see next broken up in detail.

Originally published at https://rgb.wiki.

Top Web Trends for 2020 and why they are coming

Jouan Marcel — Fri, 06 Dec 2019 17:54:50 +0000

Top Web Trends for 2020 and why they are coming

A look into the latest design and technology advances for web designers and developers

Most web design trends like elements fading-into-view, responsive layouts and parallax scrolling often can be traced back to the available technology at the time. Sometimes it is also an after-effect of a previous design trend or a consequence of a parallel trend in general graphic design. This article will take a look into the upcoming web design trends of 2020 and explore the underlying reasons for the shifts and trends.

Frosted glass effect

› What

The frosted glass effect is the semi-transparent and blurry appeareance of elements behind another. It was first introduced on a big scale for the Windows user interface via Windows Aero. Apple and major app developers started to adopt it later for their OS’ and apps as well.

Frosted glass effect on navigation bar (apple.com)

Up until now it was a rather rare occurrence, however you will see this nifty-looking effect increasingly on the web too. Current common uses are for navigational bars or text backdrops on images.

rgb.wiki using frosted glass on the nav bar

› Why

On the web this effect had to be simulated in an elaborate way, which made it difficult to implement. However with the new stylesheet property *backdrop-filter* it is now supported in most modern browsers. Also it is modern-looking and a graceful fallback is easily possible with half-transparent, solid backgrounds.

Yahoo using the frosted glass effect as backdrop upon the image (yahoo.com)

Dark Mode

› What

An adaptive color scheme of web apps and websites, aware of your native OS settings and showing you either a light or a dark theme of the site.

Youtube website in dark mode (youtube.com)

› Why

Some websites started to adopt a manual dark mode years ago. It was a simple control switch in one of the corners of the websites for those night owls who preferred a dark web design. This year major native applications on mobile and desktop have adopted a complementary dark theme (or light one, depending on their default) after the recent addition of dark mode on Android, Windows and Apple devices.

https://dribbble.com/shots/6470322-Admin-Dashboard-light-vs-night-mode

Web browsers are feeding the system preference of enabled dark mode further to web developers with the CSS *prefers-color-scheme *media-query. It’s supported in all modern and admired browser.

Gradients Everywhere

› What

Gradients, the gradual transition from one color to another. Before flat design dominated digital interfaces, gradients were used to create (semi)-realistic surfaces. With the rise of flat design several years ago it seems a transition is happening from pure flatness to gradient-infused designs, displaying some depth again.

Gradient on button border (apple.com)

The trend of gradients furthermore applies to typography, in which the font color is set to a gradient; this also pushes for bolder and bigger typography on the web to make full use of this effect.

Gradient as text color (studiovoila.com)

› Why

There is no particular web technology that makes gradients more appealing. Gradients as backgrounds, on fonts and on elements were possible before with good support.

stadia.dev

Features like *background-clip* & text-fill-color *allow for creating text with a gradient, and *mix-blend-mode allows for planar gradients by blending multiple onto another. These technologies gained good support over the years and are mature for productional use.

css-tricks.com

However seeing multiple tech companies adopting a gradient-utilizing product identity, it seems to be a naturally occurring design trend and not a technology-driven trend. The better support for *mix-blend-mode *and gradient-colors for text therefore only explains the vivid expression of this respective design choice.

Instagram rebranded its product identity away from pure flat design in 2016. In 2019 multiple companies followed this path.

Sophisticated 3D Graphics

› What

Big, cinema-like graphics and videos. Some are actual 3D renderings and others are videos playing interactively with your scrolling. The common ground lies in the sophistication of web media to capture your attention.

This 3d model is used in an animation. Notice the gradients here as well. (netguru.com/carlens)

› Why

This is technology-wise more of a continuous progression than a trend. With cheap smartphones being able to reproduce high-definition videos and 3d renderings by this time, and with the web becoming more mature, web designers and developers have the possibility to utilize technologies like this without worrying that the playback is failing and having to build fallbacks around it.

Interactive 3D game portfolio, playable on mobile (https://bruno-simon.com)

Support for high-quality video formats like AV6, H.265 and WebM is increasing and shows the need for bigger and better graphical elements on the web. It is likely that this trend will continuously progress with the overall development of the web and popular 3d frameworks like three.js.

google.com/store

Horizontal Scrolling

› What

Horizontal scrolling of elements that otherwise would break to the next line. Especially on mobile, where horizontal space is limited, we are seeing an increase in web designs utilizing non-breaking lists that has to be scrolled horizontally for more content.

Two instances of horizontal scrolling (https://dribbble.com/shots/6794395)

› Why

There’s no specific technology advance responsible, this seems to be a shift coming from the need of having plenty of content available on a small screen. Horizontal scrolling allows for teasing the content, without having to scroll down arbitrarily long to get to the next section. This can be considered a shift in UX on the web, especially as gestures like these are already common for native apps.

Fabian Sebastian writes about the benefits of bidirectional scrolling (https://uxplanet.org/be1afe53206d)

Out-of-box Layouts

› What

Grid-like layouts with transformations, rotations, overlaps and small deviations in general on the grid elements.

https://dribbble.com/shots/7748587

› Why

Responsible for grid-like layouts are the grid and flexbox technologies, both are fundamentally supported in all modern browsers. Designers are already experimenting to break out of the obvious grid pattern, with asymmetrical element placing and overlaying sections on top of each other. The support needed for safe productional use isn’t too long ago, in fact both layout methods still have features in active development (like subgrids, flex-gap and space-evenly). We can expect web designers and developers to explore more use cases with experimental variations in the future as this is a recent development in web terms.

https://dribbble.com/shots/6283244

Microinteractions

› What

Small animations and subtle feedback patterns on interaction. Microinteractions themself are already present en masse by default, but clicking a submission button which turns itself to a loading bar to show progress, pull-to-refresh interaction, or clapping a medium post and showing a fitting animation are microinteractions done with more consideration than a conventional color change.

giphy.com

› Why

Web Applications, component-based development (for reusable elements) and adoption of native gestures on the web are steadily increasing. There are enough companies that rely on creating an emotional connection with the user and on the web this is created through media and interaction. Maturing development frameworks and development practices allow for dedicating more attention to those finer details with microinteractions.

https://dribbble.com/shots/5346227

Scroll Snap

› What

Scroll snapping allows to automatically fixate the scroll position smoothly on certain elements after the user has scrolled through content. This gives the user a clear focal point, without cut-off content.

tesla.com

› Why

The need to readjust the scrolling position to fit content to the screen came especially with side scrollers, which had until recently, to be implemented manually with Javascript. Especially with mobile having the need and possibility to easily scroll sideways for cycling through containers and images it became a popular technique for content display.

ark-shelter.com

CSS allows for automatic scroll snapping with a few lines of code nowadays with scroll-snap; given the high need we will see an increasing use of it. The specifications have changed since the preliminary introduction of it, however it is now supported (in part) even on IE/Edge.

Tell us what trends you are interested in! What trend are you waiting for to take off? What trends do you see declining?

Originally published at https://rgb.wiki.

The anatomy of a button

Jouan Marcel — Wed, 27 Nov 2019 14:05:19 +0000

This is what you need to know to become a button expert in UI Design

Buttons are one of the fundamental building blocks of modern graphical user interfaces. They have become so omnipresent, that they are often used without getting the recognition that other UI elements experience. This article will break down the anatomy of a button into its characteristics, variations, technicalities and usages, so you can start to appreciate how versatile a button can be used and design them with more attention to detail.

A button is a user control element for triggering an event such as saving, deletion, toggling or changing any other state of the underlying system. Conventionally from the physical world, it got adopted into the virtual space as one of the most fundamental control elements.

Characteristics

Buttons are usually rectangular shaped and horizontally aligned.

Text and Icon

Inside a button, an indicative description in the form of text or an icon is placed. An icon is visually faster to spot and can transfer meaning across multiple languages, however it is also more ambiguous due to cultural differences (not only across countries or regions but also across generations). Text can describe the buttons function more precise and more nuanced, for example when there are multiple similar actions like Save and Save as…. Text and icons might be present simultaneously for an emphasized meaning and making use of both their advantages. Text usually is centered with equally large spaces to its side for visual balance.

Color

The color of a button plays an important role as it is already visible before one can even take a glimpse of the content. This makes it attractive to visually hint the purpose connected to the button.

If a user interface is rich in controls, they often are kept to a neutral gray or have a matching color to its container to be less intrusive. Action buttons that are more important, because of their central role in the user interface, or because they are the favored option to pick (by the user, or the provider) can have a more signaling color.

Examples for functionally relevant colors are green for positive enforcements like saving or publishing, or red for negative losses like deletion and cancellation.

Variations

Skeuomorphism

Due to their analog use of physical buttons, they oftentimes inherit skeuomorphic elements like gradient backgrounds and casting shadows simulating bulging and depth. And often a darker background color when pressing it simulating a physical push of the button into the console interface.

Flat Design

In absolute contrast to skeuomorphism flat design takes the role of a minimalistic approach by removing visual cues of depth. Flat design is a puristic form of digital art style as plain, flat rectangles are very simple to render on a diversity of platforms. Whereas skeuomorphic elements need textures, more complex effects, effortful customization for adaption and more computational resources to work out, flat design is simple to implement, easy to scale and resource-saving. Furthermore, it has a weaker intrinsic character, allowing it to be adopted on a wide range of platforms.

Common critics against flat design are that the lack of depth makes it visually hard to see as a clickable element, especially if the interface is loaded. If there is no separate background color set for the button it is also unclear how big the space is, that it occupies or even if it is clickable in the first place, as it may appear similar to labels.

Ghost Button

A ghost button is a special form of flat design which makes use of a transparent background and a defined border. Except for its content and its border one can see through it, providing it with this name. Its effect shines when placed on a wider image background, as the image rules out that the button is indeed transparent and not only plain colored.

While a ghost button can be a stylistic choice of putting not as much emphasis on it, it can, similar to normal flat design, making it less clear of it being a button or resemble too much of a text input.

Illustrative

Similar to skeuomorphism an illustrative style makes use of a more pronounced style with decoratives. It shares the realistic aspect to some degree, but it doesn’t try to emulate the real world. It is not realistic per se but adopts aspects like lighting and texture. This style category is mostly adopted by games, for example as a cartoon style or another stylized adoption of the real world.

Technicality

Reactive States

Ideally, a button provides reactive feedback of its internal state, most commonly these are when the pointer is hovering over the button or when it is in focus in another way, when it is actively pressed on, and when it is disabled.

Default: The natural state of the button, ready to be interacted with.
Hover: Is the pointer in reach of the buttons control then it enters the hover state, indicating its readiness of being activated. A button might change its background or text color, scale up slightly, glow or have another kind of transformation happening to signal this state. On mobile, this is often emulated by touching on the button, without releasing it on it.
Focus: Similarily to hover the focus state shows that it is the active component under the influence of the user. Unlike hovering however it can change to this state by other means like tab navigation. The user then gets a visual cue which control has input focus; a button then might be activated by pressing the enter or space key. Based on the asynchronous nature of tabular control and mouse events, a button can be in focus and active or hovered at the same time.
Active: The actual state of a button when it is being activated. Ideally, the visual change differs from the hover, focus and idle state, so the user can be sure it has been activated.
Disabled: A button might show itself non-available if the function should be displayed without it being able to be triggered. Often it is grayed out and blends more into the background. It then should stay in this state and not be able to switch to any other state showing readiness as this would confuse the user. A button might be disabled for example when it is a submission button for a form that is not filled out completely yet; its function then is limited to show what the user would be able to do if requirements are met.

from Codepen: @jouanmarcel

Size

A button rarely is only as big as the content it contains. The reasons to make it even bigger are aesthetically, to make multiple buttons the same size or fit them into a layout and also functionally to make them easier to reach and faster to click.

This has been studied and solidified in Fitt’s law, which formally describes…

The time to acquire a target is a function of the distance to and size of the target.

Border

A button might have a visible border depending on its art style. A border is defined either by an actual boundary surrounding the button or by the edge visually created between the different colors of the background and the button.

The size of a plain, transparent button without visible border can be hard to judge and may even lead it to not being recognized as a button. A transparent button with a visible border can be considered a ghost button. Both styles are notoriously used in Flat Design.

Corners

While buttons usually are rectangular shaped, they can have a degree of rounded corners. While details like this may easily be dismissed as subtle, the effect of that decision can already influence the user. The book Universal Principles of Design talks about the Contour Bias:

Consider the contour bias in all aspects of design, but especially with regard to objects and environments that are emotionally neutral. Use angular and pointy features to attract attention and provoke thought. Use contoured features to make a positive first impresssion.

Usage

Buttons are ubiquitous in graphical user interfaces. Their use extends from a simple dismissive Ok for checking off notifications and popup, up to making up more complex controls like dropdown, ribbons and menus.

Events

A small selection of common events for button are:

Execution of action: The most straight forward function of a button is a stateless execution of an action: The button gets pressed once, another thing happens once in reaction. The button gets pressed twice, another thing happens twice.
Submission of data: The button acts as a gatekeeper between the input of a form and the actual submission to the server. It may be disabled while the form is empty or awaits more input and it may indicate an idle state while the submission is ongoing.
Confirmation: A confirmation that interaction has happened and the user is aware of it.
Navigation: A button on the web usually shouldn’t be used for navigational purposes as for this case links are the appropriate element to use. Nevertheless they are often used for highlighting the desired path of navigation, eg. call-to-action buttons.

Higher-level controls

A buttons simplistic nature allows for versatile use for higher-level controls, these include:

Dropdowns: The button as the starting point of a palette of more actions, dropping down as a list of options. To distinguish it from an event button a small downwards arrow is commonly used as an accompanying icon.
Switch: Also called toggle button, it is similar to a checkbox, only that its state change is immediate. It should also have clear communication of an on-/ and an off-state.
Tabs: Comparable with radio boxes, allowing only one to be active and acting as a navigational tool to switch sections of content.

Note: This will be a part of a series of articles about the analysis of various graphical user interface elements. Let us know in the comments which GUI element you want to see next broken up in detail.

Originally published at https://rgb.wiki.

Skeuomorphic Buttons (Realistic 3D effect)

Jouan Marcel — Tue, 26 Nov 2019 18:38:44 +0000

Skeuomorphism was used on the earlier iPhones and was made popular by it as well for UI design. It got mostly deprecated by flat design, as skeuomorphic elements are harder to create, maintain and scale across different platforms. You will notice, that the style doesn't work out nicely when you change a single color like the background. Play with it, learn what happens and how it is done, but I would not recommend to use it on your website / app. It's 2020 anyway and skeuomorphism is still out, otherwise you should at least wait a couple of years til it's considered vintage, retro and trendy again 💁

Designed for: https://rgb.wiki/button