Make the web design of your solution fully responsive, and it will look flawless for any user.

The secret lies in the modern tendency to utilize various devices with different screen sizes for entering the Web. The times when you could enjoy the Internet only at home sitting in front of your PC display passed long ago. Now everybody can put the World Wide Web in a small pocket and take it almost anywhere his or her heart desires.

So, if the design of a web app plays well with a laptop, but can’t successfully adjust to a smartphone screen, software developers are likely to be criticized. To avoid such a nuisance, software engineers should spare no effort to make web design as responsive as possible.

What can facilitate the process of creating responsive web pages?

Actually, there are many factors to keep in mind to make web design responsive. But luckily, there are certain ways of alleviating and speeding up the process. UI libraries and frameworks provide developers with a number of ready-made UI elements that help create outstanding responsive web apps. Such canned solutions save app and website creators from the number of mistakes and accelerate projects. All you need is to choose a JavaScript UI framework that suits your tasks perfectly. It’s also important to pay attention that your framework should be built in accordance with material design guidelines.

Apply a viewport meta tag to your web app to make it look good on various screens. This will enable the scaling of the page and its contents.

<meta name=”viewport” content=”width=device-width”>

The width=device-width adapts the page width to screen-width of a device. To put it in a nutshell, because of this tag a browser knows that you need a viewport fitting the width of a mobile phone screen. You can set the max width manually and make it, say, 320 px like this:

content=”width=320px”

The initial-scale=1.0 part sets the initial zoom level when a user loads a page for the first time. One viewport pixel is equal to one CSS pixel. User-scalable, maximum-scale and minimum-scale properties control how a user is able to zoom the page in or out. Pay attention that “1.0” does not zoom. If the variable is set to “2.0”, then a user will be able to zoom in a page by a factor of 2, etc.

Scale the contents to fit a viewport

The main problem of unresponsive websites and web apps is that a user has to scroll the contents horizontally on a smartphone, the screen size of which requires vertical scrolling. Zoom in and out is also far from being convenient. And even if you managed to create a sufficiently responsive web page, it still might be hard to get rid of horizontal scrolling. What is the reason for this?

It usually happens because of using massive elements with a fixed width. The source of this problem lies in the variety of devices. There are many smartphones and tablets with different screen widths these days. When you fix the minimal size, you are likely to go wrong with it, because in this case, the image may turn out to be bigger than the smartphone width. A user will still have to scroll or, what is worse, won’t be able to see the whole image.

The situation is the same with setting the max image width. If you set the CSS width property to 100%, the image becomes responsive and can scale up and down. But it may cause a problem: the image or text can be scaled up to be larger than its original size. And surely, it won’t look beautiful.

An ideal solution is to use the max-width property for images instead. If the property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

img src=”img_girl.jpg” style=”max-width:100%; height:auto;”

Employ media queries

With media queries assistance you can apply CSS styles suitable to almost any device. A media query is a CSS technique introduced in CSS3. It allows changing CSS styles the choice of which depends on characteristics of the device such as screen resolution, its height, and width. A media query uses the @media rule to include a block of CSS properties only if a certain condition is true for a particular device.

@media (query) { /* CSS Rules used when query matches */}

It’s also recommended to use min-width instead of min-device-width. Some developers think that these terms mean the same. And it’s a common mistake because min-width is primarily related to a viewport that is narrower than a min-device-width. This lack of understanding leads to unpleasant consequences. The contents risks to appear beyond the viewport. No user would enjoy this.

You’ve probably already noticed that using relative values can save you from unexpected mistakes. For example, fixing the width at 320px isn’t a good idea. But if you make it 100% like in the example below, you won’t be wrong. The page won’t be able to get wider or narrower than the screen of the device.

div.fullWidth { width: 100%;}

Choose the most appropriate breakpoints

A breakpoint is usually required when you have to change the number of columns (the main sidebar primary sidebar, secondary sidebar) at a web page to make it responsive. For example, the typical breakpoint happens when the sidebar is dropped below the main content to make everything look fine on smaller devices.

Some developers prefer relying on the most popular resolutions to set the breakpoints. And it’s a reasonable choice. But one should keep in mind that the best tactic to follow is a ‘mobile first’ approach. It means that the development should always start from creating the version for a smartphone, and what is more, for the smallest one. It helps to find out the most important information on a web page. And later it will be easier to come up with the breakpoints for bigger screens.

Creating a digital solution that can perfectly adjust to any kind of screens is a demanding task. Web developers should know a bevy of tricks to make a web page responsive. They can either follow the recommendations from this article or save themselves from a lot of trouble and turn to the ready-made elements from UI libraries.

The Human Factor: Why is There So Much Bad Design?https://www.noupe.com/design/human-factor-much-bad-design.html
https://www.noupe.com/design/human-factor-much-bad-design.html#commentsThu, 21 Jun 2018 04:30:34 +0000https://www.noupe.com/?p=104692]]>

Bad design is everywhere, while there’s still a lack of good design. Why’s that? Are there not enough experts? Are they being misdirected somehow? Is it human nature? Let’s take a closer look together.

Yesterday, I wanted to take care of a straightforward task. I tried to correct the time on my microwave clock. For some reason, the clock was fast by a few minutes. Do you think I succeeded? Right, I didn’t. And, without the manual that I didn’t want to look for, because of my anger, I won’t get it done. Is that my mistake? No. The device’s design is simply bad.

All of us know a lot more bad than good design. You don’t need to be an expert to tell apart the two. Anyone can do that. To create good design, however, expert knowledge is required. The path to a good design is paved with many decisions, where it is easy to make a wrong one.

The Einstein quote “Make things as simple as possible but not simpler” surely is a good maxim to follow. However, today, the problem rarely is the design being too simple. Instead, “overdesign” is a lot more common. Let’s start with a few basics, though.

What Design Is

As Steve Jobs said, design is not just the looks of a product, but its functional core as well. The former Apple boss was almost a design radical. When he returned to Apple in the late nineties, he reduced the product portfolio from 350 to about ten products. The complete development focus was put on the remaining products. For a brand in its entirety, one can say “Design is focus.”

While we’re at it, we could also add “Design is the brand.” What is the thing that brands use as their primary means to set themselves apart from the competition? Exactly, the design. This becomes especially obvious on the car market. Regarding technology, the differences are mostly irrelevant, but the design is often radically different. Looks and user experience are a major, if not the only factor when it comes to purchasing a car. The stronger the design, the stronger the brand is perceived. This leads to an advantage over the competition.

If we don’t want to look into something so different from our branch, all we need to look at is the app design of modern apps. What are the differences between today’s interfaces? In many cases, the only differentiations are micro-interactions, as I pointed out in this article.

“Design is Guidance” is the result of this realization. If we know that design is focus-oriented, and represents the brand, we have to make the design take care of guiding tasks as well.

Guidance affects the aspect of usability. Products need to be designed in a way that they can be used. For that, the version that suits the user the most has to be chosen from many different possible variants. We can’t let the user interact with the product freely, so we have to set clear guidelines to make him feel safe handling the design.

By the way, the manufacturer of the microwave mentioned above is not the only one that messed this up, as the manufacturer of my high-tech pyro self-cleaning oven did the same. Here, the clock is still set on winter time, and I just can’t fix it…

The aspect of guidance also affects the diversification of the product range. We have to assume that most potential users of our design are no experts in handling the respective product. Thus, it doesn’t make sense to offer many products of the same type with slightly different features. By the way, it would be nice if larger companies like Asus, Acer, and so forth were to recognize that.

Or let’s take a look at the smartphone world, where a large provider like Samsung offers a dozen different similar offers, while Apple basically offers three. This makes it a lot easier for the potential customer to decide on an offer. The designer has to make sure that their design represents a good combination of all options so that the buyer does not think of it as a mispurchase due to missing features. The approach “design is guidance” means great responsibility, and is not to be taken lightly.

Otherwise, we could not realize the critical aspect “design solves a problem” to a sufficient extent. As a designer, we always start with a problem that needs to be solved, and never with the solution as the focus. In other words: “People don’t want to buy drills, they just want holes in the wall.”

What do you think? Was this drill bought because of how it looks? (Photo: Depositphotos)

At the core of the design process, we have to keep the principle “design is simple” in mind. If we mix all the mentioned principles and distill them, the result can’t be anything different. At the same time, sticking to this principle is quite sturdy. There are a bunch of reasons as to why that’s the case.

Once we’ve managed to realize the principle we just mentioned, “design is contemporary” applies. This sounds like you’d only have to design a product correctly once, and then become unemployed. And on the highest level, this is true.

Fortunately, technological advances frequently put us in the situation where we have to create innovations that just weren’t possible up to that point. For example, seven millimeter thick smartphones would have been a superior design concept for mobile phones in the nineties, but we didn’t have the means to do that. Thus, I can confidently say that designers will keep their jobs for a long time to come.

Additionally, “design is in the details” and “design is a result of observation” both apply. We often notice that good design can be perfected by working on individual details. This realization is gained by observation.

It’s not rare for us to overlook one or more aspects, or even some unexpectable elements when thinking about how the user will work with the design. It’s up to us to make the necessary changes. Here, I define “necessary” as known optimization potential, rather than already known functional deficits.

What Design Shouldn’t be, But Often is Like

Now, let’s get to the misdevelopments that you can easily find all around the world if you want to.

Narcissism: Design as a Solution in Itself

Of course, design is supposed to offer a solution. However, the underlying problem has to exist. These days, we often see companies developing products and services that offer fantastic solutions. However, they won’t do well when there’s no need for them.

Design needs to solve an actual problem that preys on their minds. A design for its own sake is not even good if it’s pretty.

When the own reflection is the most beautiful thing… (Photo: Depositphotos)

Designs that only set themselves apart from other designs by being designed by someone else go in the same direction. When I look at the myriads of me-too apps in the world’s app stores, this problem becomes apparent time and time again. It makes no sense to offer a solution to a problem that was solved multiple times before if the solution approach is not fundamentally different from and better than the existing ones.

Generally, one can say that creative workers tend to be a bit egocentric. This shouldn’t lead to narcissism on a level where the designers consider themselves to be all and end all. Design always has to remain modest. The most effective solutions are usually the simplest. There’s no room for narcissism.

Fear: Design as Everybody’s Darling

I can understand it to some extent. Companies want to sell products. That’s hard enough. As we know, there’s nothing harder than getting other people’s money. So, every product comes with a bit of fear. Will the potential clients like it? Will it sell? Should we make this or that version, in case someone doesn’t like version A?

This is what Apple was like before 1997. Tons of products, some of which could only be configured with a doctorate, blocked the clear view at the unique selling point. Everybody’s darling quickly turns into everybody’s idiot. Apple was on the verge of failure. Today, with a radically reduced, clearly focused portfolio, those days are long gone.

About two years ago, the Californians made another radical design decision by forgoing the headphone jack for the new iPhone. That’s nothing you do when you’re afraid. And this is how Phil Schiller sold it on the according Apple congress in San Francisco. He said the decision required grit, and Apple had grit. Of course, not everyone agreed with that, but this wasn’t any different ten years ago, when Apple presented the iPhone, a mobile phone without a keyboard (!). Two years later, we see more and more smartphones forgoing the headphone jack. (I’m not trying to say that I agree with this specific design decision.) And there was not enough demand for smartphones with a keyboard to make a comeback, either.

Design requires clear decisions to be made and stuck with. Fear is a bad consultant, but also one of the reasons for many bad designs.

Greed: Design for the Quick Cash

Shortly after the introduction of the first iPhone, there were imitators on the cheapest segment. The devices looked good, so one could say they were designed well. Due to price reasons, however, they made too many compromises, resulting in them being a mere shadow of the original design. Why were they made, then? Because of greed, the wish for some quick revenue, and the abuse of bandwagon effects.

The big companies aren’t free of this form of greed either. My favorite example for greed-driven design is Nintendo, for many reasons. Take a look at the moneymakers, like Pokémon. About every two years, a new game for the handheld consoles is released. The changes made are very minor. The principle remains the same, with only the “world” the games take place in being slightly (very slightly) different.

Or let’s take the company’s handheld, the Nintendo 3DS, and its successors. Several times, Nintendo tried to initiate exclusive developments for the newest model with minor changes. This has never worked, as both the customers and the game developers could quickly tell that the “new” model was not more than old wine in new wineskins.

Another kind of greed, even if it might sound a bit harsh, is the goal to achieve or undercut a particular market price. In this case, compromises are made, affecting the design. Up to a certain degree, this is fine, as it’s somewhat inevitable. After all, this is not utopia. The abidance of reasonable limits is a calculated design decision.

Greed-driven product development can only succeed in the short-run, if at all. Nonetheless, it is frequently tried, and never remains unnoticed, being another reason for bad design.

Embrace: Design to Design

Once designers have fallen in love with their design, anything can happen. They’ll add a function here, and another one there. Just because they can. The designer has created something that they don’t want to let go of. You might remember this from your grandpa’s allotment garden. They’d add a tree here, a rose there, and another paved area here. And if you look around after two years, the garden looks like Sanssouci, but on a hundred square meters.

While this is completely fine in the case of your grandpa, this is a disaster for designs in general. This aspect is another explanation for many, overloaded designs.

Conclusion: the Human is the Problem

The design itself is mostly objectifiable. When setting up and executing the process cleanly, the best approaches come up on their own. Though, you have to stick to some basic rules, of course.

Only when the human factor gets out of hand, bad design happens. Or if you let someone design something, even though they simply can’t do it. ;-)

(Article Image Source: The likable hipster was taken from the portfolio ofDepositphotos)

Modern design needs to work everywhere, not just on the desktop. In order for that to work, it has to be as compartmentalized as much as possible. In the following article, I’ll show you the best way to atomize your design.

In the Past: Design was Space-Consuming

Edenic times. Designers used to design for a rectangular page format and argued whether they should optimize the design for 800 x 600 or 1.024 x 768 pixels. Abilities the browser didn’t have were added via a plugin (Flash, Java, and dozens of others). This is how the web was dynamic and entertaining twenty years ago.

Hero areas were already common about ten years ago. With Flash, pretty much everything had a hero look. (Screenshot: Smashing Magazine)

Then, we got the first wave of digital handheld devices. People tried to establish WAP as the technology for mobile internet access. Everyone who fancied themselves had an own WAP site. There weren’t all that many. And the WAP pages were not related to visual aspirations whatsoever. It was more like some kind of BTX; just as ugly as the old screen text, but much smaller. I have never created or operated a site like this, and I never had clients asking me to.

Then came the iPhone, followed by Android shortly after, and everything changed. The beautiful design rectangle blew up. All of a sudden, the screens were higher than they were wide, and the possible resolutions multiplied faster than we could adjust our designs. We believed to have found an answer to the resolution chaos with responsive design. Then, we got smartwatches, and we had to rethink the whole thing.

Speech assistants are a rapidly spreading hardware feature. Amazon’s Echo Dot is less than 40 Euro by now, and even the bigger Echo only has a double-digit price tag. This competition from Mountain View is distributed for 59 Euro in the Home Mini version, with the big Google Home version costing 149 Euro. In terms of pricing, there’s a lot going for Amazon, while the two rivals have few differences in terms of functionality.

Even cars are equipped with more and more intelligent solutions. On top of that, there are smart TVs, intelligent sound systems, like the Sonos, as well as tons of devices that relate to the internet of things in some way.

Your Digital Offer Needs to be Omni-Available

When selling a digital product, or using digital means to sell a product, or offer services, being represented on as many devices as possible should be in your interest. Even if you don’t agree – your customers will expect to be able to use your offer on all their devices. If you don’t want to fulfill that wish, just know that one of your rivals will do it either way. So you don’t really have a choice.

So, you’re faced with the problem of having to present your digital offer on a variety of devices with various specifications, some with and some without screens. The design approach that allows for that is called atomization.

When looking for a solid design approach that can support you on your way, read my article on atomic design. The approach wasn’t meant for this purpose, but it does suit the trend pretty well.

Divide Your Service Into Atomic Particles

The concept of atomization assumes that a design should be split up into small units, in order to reassemble it across a wide number of different devices. Atomization could even mean that the service itself is divided into its components, and reappears in a different context, or even as a part of a third party offer.

In this context, you’ll often hear the word “headless”. This describes a service that works without necessarily needing an own user interface. If you’re interested in the topic, read my article about headless browsers.

Notification Systems

The case I mentioned last, the integration of content into third-party offers, is most commonly represented as the increasingly more popular notification systems on smartphones, as well as Windows and macOS. Here, small bits of information or control elements are displayed outside of the actual brand context. Without having to start a weather app or a calendar, your notification stream shows you if it’s raining, and when you need to go to the dentist. The app is installed, but not needed for the display.

By now, notification systems are evolving, offering options for the next logical follow-up interaction, like replying to a tweet, right from within the notification. The actual app does not need to be started up.

A Minimal or No User Interface at All

Things get even more interesting if you want to provide your service on devices that only have a minimal user interface or none at all. The paragon for this kind of design atomization is Spotify. Spotify runs smoothly on a desktop, smartphones, tablets, smart TVs, the PlayStation, in cars by Ford, Volvo, BMW, and others, and even on sound systems like Sonos, Pioneer, Sony, and the Google Home and Amazon Echo boxes.

In order to achieve this omnipresence, Spotify had to divide its service into atomic particles. As a monolithic desktop application, the service couldn’t be used on the Apple Watch, and don’t get me started on Sonos.

Problems That You Didn’t Have Before

The atomization of a service is no simple feat for confident brand owners, as it always means giving up some control. You can’t control your brand the way you could if you were able to fully influence the environment. This will be especially tough for older brands. I still remember the corporate design guidelines of past customers. Some of them were about the size of a phone book.

At the same time, of course, it is necessary to maintain contours, and to stay recognizable as a brand. Otherwise, you’ll pretty much get absorbed by the technological platform that you want to be present on, preventing you from being an independent part of the customer consciousness. This would also prevent you from creating a customer relationship.

Spotify solved the task by focusing on the logo and the color scheme, forgoing any further branding elements. This makes it easy to recognize the service on all devices, from the green logo alone.

There’s barely any room on the Gear Fit. Spotify is still recognizable. (Photo: Spotify)

When it comes to atomization, consistency is key. As long as the respective device allows for it, major control elements should always be located in the same spot, and be operated in the same way. Here, Spotify has an easy time implementing its core functionality. After all, they are directly inspired by the common player controls.

Different Devices Have Different Abilities

Part of the atomization as a design principle is targeted usage of the abilities of the respective device. Google Play Music, for instance, gives location-based suggestions. Spotify on the smartphone is able to react to the running speed. In Google notes, users can set location-based reminders, like “buy shaving cream” when they’re near a supermarket. Fitness apps use GPS or heart rate features and synchronize them across all devices. For the user, using the service must feel homogenous. No matter what device they’re using.

Conclusion: Atomization Increases Your Range

Those who divide and reassemble their services properly have a rather simple time trying to be present across multiple devices. However, you have to be willing to let go of some control.

Often, technical terms in web design aren’t more than empty words. The term “Atomic Design” is one of them. All it does is allow its inventor to spread his philosophy with a memorable name. Nonetheless, it is worth looking into the content.

Atomic Design: This is What’s Behind the Word

The term “Atomic Design” has been haunting the web for nearly half a decade. Invented by Brad Frost and supported by an entire e-book, it is still waiting for its triumph. Or is it? This depends on how you look at the phenomenon.

If you haven’t heard of “Atomic Design” yet, you’ve come to the right place. I’ll briefly explain the theoretical approach, so we’re all on the same page. If you end up developing a more profound interest in the concept, use the links to Brad’s websites, and his e-book, above.

The five components of atomic design. (Illustration: Brad Frost)

“Atomic Design” is meant in a literal way. It starts at the atom as the smallest component of a design. An atom, for example, is an HTML tag, a font, or another unit of the design system that can not be reduced any further. A molecule is a conglomerate of multiple atoms that solve a task together. This could be an HTML form, for instance. The next unit is called organism. Here, multiple molecules assume a specific role. An organism would be a complete header, footer, or the area with recent news. I think you can imagine what I mean.

This where Frost leaves the chemistry analogy. The organism is followed by the template, a pre-stage of the actual page. The latter is the page available to the user, with all active contents, while the templates are where these contents are meant to be placed in.

And that’s pretty much it.

Atomic Design: The Only Thing That’s New is the Term

Huh, some web designers will realize that they’ve never done this in a different way. However, they would’ve never thought about using these terms to describe it. If you’re in the same boat, I welcome you. This is my understanding of the situation as well.

Of course, it sounds excellent and pseudo-scientific if we talk about atoms, molecules, and whatnot. This doesn’t provide any value, though. It only makes sense to build pages on a foundation of templates that we’ve filled with different functions and layout blocks. It doesn’t matter if I call it atoms, molecules, or something entirely different.

The periodic table of HTML elements. (Illustration: Josh Duck)

Thus, saying that atomic design is just old wine in new tubes is justified. Which also answers the question of whether atomic design is a success or not: it is successful, but not under this name tag. **

I can see one advantage of using these terms, even if it’s more of a psychological one. By speaking of atomic design, we create a mindset that points us in the right direction. This results in us focusing on the details of the design approach, rather than randomly designing the right way.

It should be undisputed that a design approach should always start at the smallest, and end with the largest component. Responsive design is one of, but not the only factor forcing this approach on us. Whether we’re doing it voluntarily or not, there are valid reasons for the method.

Arguments for Design Kit Systems

Although houses can look very different, the construction industry has agreed on one shared modular system, which every house is more or less based on. Ceiling, wall, and roof elements are building blocks; delivered and takes as the raw material. The same goes for windows, doors, and so forth. The only individual aspect is the number of different building blocks and their appearance.

The same goes for our branch. Even if you claim to build every page individually, obeying the requirements set by the client, the truth is that every one of us has stockpiled snippets for all kinds of different functionalities over the years, and is happy to use them over and over. This is nothing to be ashamed of, but rather proof of reason, especially looking at it from a business perspective.

This already starts with the wireframing. The wireframing is a conception method that visually depicts the approach of atomic design. In rough content blocks, we sketch how the pages will be structured, and where which functionality is to be expected. This lets us get an idea of the project from top to bottom without us getting lost in the design details.

One could say that atomic design helps users to keep an overview. Of course, the other mental approach already helps with the creation of reusable code blocks. Without this approach, you could be less focused on this aspect.

Summarizing the advantages of the method, whether you call it atomic design or not, we get a neat list with some use value:

You Have a Collection of Modules to Assemble in Any Way Desired

If you strictly stick to this approach, you have an arsenal of ready-to-use function modules that you can put together in any way you want to. Within the given hierarchy, you’re free to do whatever you want, allowing for the fast creation of prototypes or more.

Your Style Guide is Pretty Much Created Automatically

Since you’re designing on an atomic level, you can use the components as a style guide. Or, put differently, you don’t need one at all, as using the small components automatically results in a consistent design.

The code base is consistent by nature as well, contributing to a more natural understanding of the function modules.

Your Design Aspirations Remain More Practical

If you can design freely, you tend to design a layout page-based. This is normal and what everyone’s used to. When sticking to atomic design, it’s more about creating a working design that looks good with the given building components. Due to the patchwork approach, “mobile first” is the native maxim.

Logically, the prototyping, if that’s what you want to call it, speeds up as well. Your first drafts will be done much faster.

Atomic design and the construction of your house are not that different.(Photo:Depositphotos)

Your Website is Easier to Take Care of

If you consequently stick to the hierarchy of atomic design, removing, replacing, or relocating blocks is easy. This doesn’t make active care of your website as easy as 123, but it is no rocket science either.

The Approach Can be Extended

Once you’ve internalized the atomic approach, you’ll notice that your HTML markup is not the only thing that can benefit from this. CSS, JavaScript, and other technologies allow for the same process as well. Especially JavaScript has some potential here.

Conclusion: Atomic Design in Itself is a Good Thing

As you can see, atomic design is a good thing. Whether that’s what you want to call it or not is up to you. If you’re going to play around with Brad’s concept, check out Pattern Lab. Here, you can get used to the thought model. If you know bootstrap, this won’t be challenging.

Now if that word didn’t sound so negative. From a purely phonetic point of view, design critique sounds devastating. In the following article, we’ll bravely move past details like that, and find the pearls hidden within the oyster.

What’s Design Critique?

Some people get dizzy just from hearing the word “critique”. Though properly executed, design critique is beneficial to everyone involved. Thus, we want to take an in-depth look at it.

But before we make one of the very common mistakes made during the process of design critique, we should explain what this word means, or how we will define it in this article:

We consider design critique to be a structured feedback process meant to evaluate and, if necessary, improve a design regarding different factors.

So, design critique is not the thing your boss or client likes to hit you within an email. That’s critique as well, but, most of the time, it’s not very helpful.

Design critique is not a disciplinary action of the executive office. (Photo: Pixabay)

The Four Ingredients of a Useful Design Review

Let’s emphasize that design critique is a structured feedback process. As such, it first needs a structure in order for you to get proper feedback.

#1: The Preparation

One thing in advance, and very clearly: design critique is not a cracker-barrel group trying to destroy an argument with the most intelligent and striking arguments. Design critique always has to be designer-induced. It is not some kind of disciplinary action in disguise and not an intelligence competition among colleagues.

Thus, the responsible designer is the leading head of the design review. So, if we subject us and our design to a design review, we’re the ones in control. Of course, this doesn’t work without preparation.

If we expect useful support from a design review, we shouldn’t leave the topic too open. If we make this common mistake, we can’t be surprised if general palaver doesn’t result in any legitimate guidelines for action. This is not even surprising, as, without any specification, everyone will approach the topic with their own inner specifications and assumptions, which rarely leads to results that allow for a consensus.

So, we always enter a design review with specific questions. We introduce our design in-depth and explain each design decision with profound reasoning. While preparing, we’ll surely find some points where we’re not sure if our previous design decision was the right one.

#2: The Composition of the Team

Ideally, we define a small group of three to seven people that we want to involve in the design review. Generally, these people could have different backgrounds, like client services, marketing, or other sections. The exact composition of the team depends on the stage the design is at, and which kind of feedback we expect.

When it comes to the details of user guidance in some design areas, a small group of experts with the same, or a similar background is recommendable. This is not about matters of taste or brand perception, but technological detail questions that only experts should be dealing with.

When it comes to the design as a whole, including the client or the marketing can make sense. After all, they have to support the design in the end, maybe even use it, but definitely identify with it.

In general, we can say that design critique should never be the spontaneous result of a group of people that met randomly. If you consider design critique a constant task with multiple sittings until completion, it makes sense to keep the same team throughout the process.

#3: The Conversation

We focus the conversation on the questions resulting from our preparation and request feedback. However, it is inevitable that the explanation of the made design decisions results in additional questions from the other participants. These questions are only dealt with once the primary feedback that we requested has been taken care of.

The conversation should be moderated if possible, although we, being the responsible designer, should always have the speaking priority. This way, avoid the common problem that “everything has been said, but not everyone has said it yet”. As the designer needs to participate in the process so heavily, it could make sense to have some kind of recorder that can show you a result protocol in the end. This also gives us a to-do list that was basically made in cooperation with the other participants.

The course of the conversation should be as democratic as possible. Every participant, aside from the designer, has the same right of speech. Judgmental statements should be omitted, minimizing the risk of leaving the factual level, and moving to the emotional or ideological level.

This risk should be kept in mind when composing the group. People that aren’t capable of factual discussions due to their personality, should be left out. Unfortunately, this doesn’t work when the troublemaker is the boss.

#4: Standardized Questions

David de Léon, design lead at Inuse, uses a very fine-tuned set of questions for the design reviews in his agency. This way, he wants to make sure that the process is standardized and no important aspects are forgotten.

Design critique: when the good old flipchart makes sense, we use it. (Photo: Pixabay)

Although I think this catalog is a bit too detailed, as it contains 52 questions, it can still be a good pool of ideas for our own design review. We could borrow ten to twenty of its questions, giving us a good guideline for our conversation that allows for structured feedback.

In my opinion, the most interesting questions are the following:

What do I want to have at the end of the design review?

What would other designers change if they had to take over my design?

Does the design stick to established patterns? If not, why not?

In how far does the design appeal to the potential user? What is the design trying to accomplish?

What’s the most important design element?

Is the usage consistently attractive for the user, even after weeks?

Will the user encounter difficulties during usage, and if so, what kind of help is provided?

Is the suggestion the best I can imagine, or just a tradeoff? What’s the tradeoff?

Which alternatives have I considered and scrapped, and why?

The mentioned Medium post contains more questions, which can be compiled in different ways depending on the requirements, group composition, and the goal.

Richard Rio Omolo of Booking.com drafts the design review process of the travel website on Medium. He adds the aspect of the Socratic dialogue and states that statements should not be opinion-driven, in order to keep the border between factual and emotional critique.

Design Critique in Everyday Life

If we don’t have the option to acquire a group of experts for the design review and have to validate our designs from within our freelancer office, the basic rules still apply. However, I definitely recommend using a dedicated question catalog with very specific questions.

We can then send out this catalog to experts from our professional network via email, turning them into our virtual design review team. If we’re willing to give feedback ourselves, we can quickly establish a valid solution.

Conclusion: Design critique isan important elementfor the improvement of our work results. We can already maximize the product quality before the actual live tests, so many errors have been taken care of before the first user could find them. All we need to do is drop the uncomfortable feeling of being criticized, and recognize the constructive element of the process.

Intuitive web design does not mean that you as a designer should be able to whip up a website without any thought being required. Intuitive web design is to be viewed from the user perspective. If the user does not have to think while using your website, its design is intuitive.

Intuitive Web Design is Not a New Specialist Discipline

Keep calm. The term intuitive web design does not include anything that you haven’t heard before in some form or another. It’s more of a perspective, a focus, that you put on a certain aspect of the user experience. Basically, it’s about the removal or prevention of hazards on your way to a successful website.

You know how it goes: for some reason, you make your way to website XYZ via Google, and you can’t even tell what this site is about. If you’re not very resilient, you’ll immediately leave the site. I’ve even gotten into the habit of consistently doing this, although I am pretty resilient.

In 2011, Nielsen realized that visitors give a website a mere maximum of 10 to 20 seconds to convince them that they’re in the right spot. If you succeed, however, your visitors will stay for much longer. In that case, we’re not looking at a few seconds, but rather at a couple of minutes, up to double-digits. If you fail, your visitors are gone, and unlikely to return.

In today’s web, you don’t have as much time as this hourglass would leave you with. (Photo: Pixabay)

Logically, you’ll want to be successful. You have to convince your users that it is worth spending more than 20 seconds on your website.

The methods we use to do so can be summarized as “intuitive web design”.

Before getting deeper into the topic, you should get to know the expectations of your potential visitors. The web does not have a good reputation all over the population. I’m sure you know dialogues like this one:

“Where did you get that from?” “I read it online.” “Oh, on the internet, well…”

The average surfer takes a skeptical approach. Intrusive ads, and the many dangers of pishing, as well as the distribution of malware, have turned the web into what feels like a dangerous place. The basic attitude is negative. The surfer expects to be scammed or harmed wherever he goes.

Who knows what lies in the depths of the web. (Photo: Pixabay)

This is a basic attitude that heavily differs from the attitude of a potential customer walking into a store in the pedestrian area. Here, the building itself, the visible investment threshold, conveys a certain amount of trust. Page operators can only gain this basic trust to a limited extent. All websites look the same anyways. Your shop might be based on a free theme from Bangladesh…

Either way, you have to get over this negative prejudice. Unfortunately, you can’t remove this attitude in the first few steps. Thus, your website has to be designed like an open gate, with no hidden hardships inside.

6 Tips for Intuitive Web Design

The basis of our thoughts regarding intuitive web design should be designing pages in a way that leaves none, or at least very few hazards in the path of visitors. This goal is easily achieved with the six following, rather simple measures.

Tip 1: Provide What You Promise

Your visitor enters your site with a critical stance, but also with certain expectations. You’ve probably triggered these expectations with your keyword choices, and maybe, you weren’t completely truthful. Have you promised a bit more than you can offer?

I can understand that you’d try to lure as many people onto your site as possible. Once they’re here, we can still filter them. And maybe, they like what they see, even if it is not exactly what they were looking for.

That doesn’t sound completely implausible. However, the problem is that it doesn’t work. Because, as Nielsen has proven, people lack both the patience and the will to be convinced by a seemingly unsuitable website.

The first element when creating an intuitive website is SEO that makes sure that your website delivers what the search result pages promise to. Any other approach means you lose the trust of your potential visitors before they could even give it to you.

Tip 2: Make it Very Clear What Your Website is About

Listen to the marketing people when they talk about the importance of the call to action. They are right. You want your visitors to do certain things. So, don’t make them guess what you want them to do, but put your website’s goal into the foreground.

Got it, that’s the way. But where does it go? (Photo: Pixabay)

The erotic store around the corner doesn’t have coffee machines in the shop window either, and won’t surprise you with the actual offer upon entering.

Tip 3: Be Predictable

Intuitive controls are partially based on the simplicity of the process, but also based on sticking to an established convention when it comes to the design. Now, what exactly we should consider established conventions varies. Take a look at the best practices of your branch, and stick to those.

Your visitors want a unique user experience. However, that shouldn’t include having to take extraordinary paths to get to the result. Instead, you should make sure that they can quickly get to their goal without reading a manual. Thus, use traditional approaches rather than brand new innovations when it comes to the navigation and user guidance.

You could argue that finding the way was an intellectual challenge. This won’t win you any clients, though. (Image Source: Pixabay)

If you were to go to a toilet somewhere you’ve never been before, and there was a room without light switches, faucets, or a flushing toiled, would you be happy, even if it looked futuristic?

Something similar happened to me last summer, in the restaurant of an Italian mountain village. I went to the toilet and was about to wash my hands at the tap. No faucets, no sensors, nothing. After a while, I found a foot-operated switch on the floor. Did the solution do its job? Yes. But, was I impressed?

You know the answer. Don’t make the same mistake on your website.

Tip 4: Don’t Build Unnecessary Interactions

The former RTL boss Helmut Thoma once made a provoking but fitting statement: “The only interaction today’s TV viewers want is the one with their fridge.” And, even if it sounds harsh for us web workers, it still holds true today.

The attempt to impress visitors with neat, technological toys will fail. The attempt to turn visitors into customers via social media or gaming components will fail as well. Although I’ll happily admit that the latter statement may very well turn into a false statement in the next few years. We’re living in an age of fast transformation, after all.

Now, don’t confuse the term “unnecessary interaction” with the term “micro interaction”. Just recently, I advised you to make heavy use of the latter, as they can make the difference between two equal solutions for the same application case.

A good micro interaction could be a purchase button, which turns green upon clicking or tapping it, reanimating a confirmation checkmark. This would tell the client that he hit the button and that the ordering process was successful. However, and I’ve already seen this myself, it would be unnecessary for the purchase button to literally fly into the shopping cart icon, making it rotate. You know what I mean…

Tip 5: Be Minimalistic, and as Device-Independent as Possible

Essentially, the goal is to keep your website as slim as possible. You don’t want to blast your visitor with all information possible, but rather focus on the essential information.

Now, if you also stick to these design principles, there’s not much that can go wrong. Well, you may want to look into microinteractions. After all, they are crucial to success.

PWA are based on open web standards. Currently, React and Angular are popular development choices. (Illustration: Pixabay)

Since the number of those purely surfing on mobile has exceeded the number of users purely surfing via desktop computer, responsive design, which is a layout that adjusts to the respective device, is no longer a question of preference. The next evolutionary step of responsive design could be the increasingly more popular, and increasingly better supported progressive web apps.

This is intuitive web design as well.

Tip 6: Don’t Demand Unnecessary Information

If you run a digital paid service and offer a free trial to your potential customers where you want to convince them of the product in a non-binding fashion, you’re already doing a better job than the competitor that only offers a personal presentation upon request and with a fixed date.

However, your offer only becomes really good once you even avoid hazards here, and don’t ask your potential customer to enter a valid method of payment at the beginning of the testing period. You’ll see that the number of people deciding on a truly nonbinding test is much higher than any other method could ever get you.

The new EU General Data Protection Regulation, which comes into full effect on the 25th of May 2018, will motivate you in that regard as it is. Because if there’s one thing to take away from the GDPR, it’s the aspect of data economy. This means that, in the future, you can only demand data from interested users that is needed for the respective data processing.

An example: What do you need to send an e-book to a potential client? Exactly, an email address, but that’s it. Sure, a lead is hard to generate from this, but this is a very different topic. Just think of something better.

Conclusion: Intuitive Design is Simply Simple

If your web design doesn’t contain any hazards, thresholds, or intricacies that make it unnecessarily hard to get to a result, you’ve already done a lot right from the perspective of intuition. You have to consider that every unnecessary hazard can lead to double-digit losses in terms of percentage. We’re not talking peanuts here.

You should use a very generous definition of the term “hazard”. You might think the small toy with the animated buy-me-button was pretty neat. So what if it takes an extra half a second. Your potential client will definitely consider it a hazard after the second usage, at the latest. His definition is the only one that matters. Read tip 5 once again.

So, if you want to turn your visitors into clients, the best way to do so would be to make the purchasing process as easy as possible. According to CEP, this increases the chances of a successful purchase by up to 96 percent.

Long gone are the days where every web developer told their customers that all relevant information had to be visible at first sight, also known as “above the fold”, as the average web user wouldn’t scroll down the page.

I can vividly remember the fights this mantra brought with it. Sticking to this concept has always been tough, if not impossible

Above the Fold: Wisdom of the Year Dot

“Above the Fold” is a concept from the early days of information transmission. Even a hundred years ago, the publishers of newspapers made sure to put the most important headline of the day above the fold, which always divided the upper and lower half of the newspaper. The concept seemed so logical, that it established itself in all areas where information was fighting for attention.

In the past, everything printed on the page not pointing towards the reader was considered less important.

Ten years ago, websites were also made following this principle wherever possible. This was even backed by the usability pope Jacob Nielsen and his studies. Advertisers used to insist on the placement of their banners above the fold, and some still do today.

Timelines Assert Themselves, Replacing the Concept

Twitter and Facebook brought us the timeline, teaching the users that they won’t only find the interesting information above the first scroll motion and that the opposite can actually be the case. Scrolling became normal, resulting in the fold becoming void.

Nowadays, UX designers should be able to assume that even sites that make the users scroll won’t end up in the nirvana of disregard. On the other hand, we still need to present our content in a way that makes users happy to give us their attention.

Thus, it only makes sense that we need to continue to communicate clearly and highly compressed. If compression to the point where only the area above the fold remains is possible, that’s even better.

Otherwise, we could take advantage of the trend of parallax scrolling. However, we continue to scroll vertically, and not horizontally. Though, we make sure that every scroll motion opens access to new information. The best way to do so is with a page-oriented design.

This basically results in slides, presentations, that always deal with different topics, while still being consumable by scrolling one single HTML page. This concept is similar to the popular One-Pagers, without it having to be an actual one-pager.

]]>Navigation Design: Is the Vertical Menu the New Best Practice?https://www.noupe.com/design/navigation-design-vertical-menu-new-best-practice.html
https://www.noupe.com/design/navigation-design-vertical-menu-new-best-practice.html#commentsFri, 23 Feb 2018 10:00:05 +0000https://www.noupe.com/?p=104146]]>

Before yelling “no”, at least think about the new smartphone generation. The trend is increasing the device’s height, but not the width. Don’t you think that we need to make use of the viewport in a different way? Does this throw the horizontal menu off the map?

Horizontal Navigation – an Old Standard Up For Suspension

Horizontal navigation has been considered a best practice for years. As long as the aspect ratio resulted in the width of the browser window being higher than its height, this didn’t just make sense, there was more or less no other option. In conjunction with drop-down menus, as we know them from the design of desktop software, horizontal navigation seemed like the means of choice.

The main advantage was the fact that the position and characteristics didn’t force potential users to think. Those using Windows, macOS, or Linus, know the horizontal menu. A century ago, people were already experimenting with different placements. Left or right page border in the vertical ordinance, or horizontal at the bottom, sticky or not – it is not that easy to set limits to the creativity.

Especially for the right-sided vertical, and bottom horizontal navigation, there are good identical reasons. The most important pro factor is the easy accessibility of the individual menu elements with the mouse, as long as you’re right-handed. With touchscreen controls, the same thing applies for the accessibility with your right thumb. Thus, under iOS, you’ll almost exclusively find bottom horizontal menus, which do have their own disadvantages, though (keyword: higher, not wider).

Last but not least, many studies showed that the human is a creature of habit and that the upper horizontal position is unbeatable. Regarding that topic, also read our article on the best practices of page navigation.

Smartphones Revert the Aspect Ratio

Now, we’re in a different situation, though. We’ve been using smartphones for about ten years now. Their share when it comes to web usage continues to increase. And on devices with a reverted aspect ratio in comparison to a desktop device, other navigation concepts can make sense.

Until now, breaking down existing navigation concepts starting at a defined resolution was considered the best practice. This is where the hamburger icon established itself.

Now if we’re forced to turn horizontal navigation into vertical navigation anyways, why wouldn’t we use the vertical variants exclusively? It seems like an increasing number of creatives is asking that question. Realizations of this design approach can be found more and more often.

This is not even about turning the hamburger menu into the standard, but more to define the vertical menu as a standard. In modern desktop apps and some system tools, like Mail from Windows 10, you’ll also find the vertical menu approach – at least in addition to the horizontal menu bar. Oftentimes, a vertical pictogram bar is used, which either triggers functions right away or opens to the right by clicking the respective icon.

Advantages of Vertical Navigation

But permanently visible page menus are becoming increasingly more common as well. This goes well with the material design trend or Microsoft’s Fluent approach. Tiled grids look much better with navigation tiles. They attract more attention than the rather plain horizontal menus of the noughties.

After all, attention is just what navigation needs. At least if your website is designed in a way that makes users go through your – planned – navigation patterns.

Vertical menus on the left side of the page come with several other advantages as well. The average reader first looks at the beginning of the page and then proceeds to scan the left section. This is called the F-pattern. Aside from the horizontal navigation, vertical menus also match this pattern. Thus, vertical menus definitely are not a worse choice than horizontal ones.

If the vertical menu is not hidden behind a hamburger icon, it stays visible at all times and does not require any cognitive processes by the user. The previously mentioned aspect of scanning allows for the fast absorption of the given navigation options.

Additionally, the length of a vertical menu can be near infinite, while horizontal ones are limited by the window width. Scrolling as a utilization scheme continues to assert itself. Why shouldn’t we use this for navigation elements?

Disadvantages of Vertical Navigation

Of course, the vertical navigation is not free of downsides. The main one is a purely subjectively objective one. It’s the tenacity of the users. This significant habit preference is the main reason as to why the vertical navigation has not established itself a lot earlier. Tenacity is hard to get rid of.

From a technological point of view, we are right before a paradigm shift that may turn this argumentation on its head.

Text-based navigation is difficult since the usage of as few words as possible is recommended, to avoid wasting too much space. Here, a compromise between legibility and font size is inevitable. This is a good reason for a flyout menu, which is a menu that places itself over the screen from left to right via an overlay. A compromise could be a permanently visible icon bar.

The near infinite space downward could make designers and their clients not focus on the display of the most important navigation paths, and just give an own navigation item to every single element, no matter how irrelevant it may be. In the end, this neither helps the client, nor the potential user.

From a design point of view, it is very important which type of website the vertical navigation is considered for. Online magazines won’t be able to benefit from a vertical navigation on the desktop. Here, the sticky header with a horizontal navigation is far better. Portfolio websites, or other websites with rather low content volume, on the other hand, could definitely follow the trend.

This menu style used to be popular in the nineties. (Website: Artifact Property / Screenshot: D. Petereit)

Conclusion: Navigation Wants to be Seen

What the trend actually shows, aside from the almost logical repositioning due to altered aspect ratios, is that navigation generally does not like to be hidden. Concepts, like the hamburger menu, are mere compromises that are accepted as long as there is no proper alternative.

The popular sticky header in the horizontal navigation already shows that the user likes to keep an eye on available options. Instead of hiding the header, the exact opposite has been established over the past years. Now, constantly carrying along the navigation at the top of the screen is the norm.

While the previous best practice with a horizontal menu on the desktop, and a vertical menu via hamburger on mobile is a viable solution, real designers with aspirations will always prefer consistent solutions, if possible. It is obvious that this consistency should always be achieved based on the lowest common denominator. This lowest common denominator is visibly changing, however.

If we need proof, we just take a look at the current smartphone flagships, like the Samsung Galaxy S8, the LG G6, or the OnePlus 5T. These devices provide more screen, exclusively by increasing the screen height and keeping the width identical for the most part. This design will be established comprehensively in 2018. Doesn’t this logically reinforce the trend towards vertical navigation?

What’s your stance on the placement of the page or app navigation? Left, right, top, bottom – which position is the best?

(The article was originally written in the German language by our author Dieter Petereit for our sister magazine Dr. Web.)

Creating something just because it’s possible is a widespread bad habit in development. Especially smartphones provide a lot of technological options. But don’t forget that the user wants to have an easy time with your mobile web apps. The following article tells you what exactly that means.

It’s a perspective that designers rarely take: could the available interaction methods contain some that the user does not even want to use?

The consultancy Change Sciences looked into this exact question and got some surprising results. The scientists took a structured approach to the topic of mobile users with the help of smaller (up to 20 participants), and larger (up to 100 participants) studies.

For both responsive web design and native app design, they put out some solid recommendations you should consider if you want mobile users to turn into clients as well.

Forgo Unnecessary Gestures

Change Sciences found out that mobile users mainly rely on three gestures, and, if possible, avoid the use of further interaction methods. Above all else, they don’t want to be confronted with other control actions innovatively invented by the web app developer.

According to that, the most important gestures are scrolling, swiping, and tapping. The scroll gesture is the most popular and most used action of all of them. According to Change Sciences, 94 percent of all users make use of this gesture more than three times in a session of at least ten minutes. Scrolling is already familiar from the desktop and its mouse controls.

Most smartphone users like to interact with only one hand necessary. (Photo: Pixabay)

Swiping is no longer a problem for users either. Most of them try the gesture in the upper screen area, regardless of visual hints, such as arrows. In other areas of the screen, however, making users swipe takes visual clues.

Users know about tapping, but it’s not one of the preferred interaction options. In contrast to clicking on the desktop, users are quick to lose patience with tapping.

Pinch zooming is a gesture that is avoided whenever possible. Thus, there is no reason to force the action on the users. Responsive design makes it easy for you to make zooming redundant. It turned out that users tend to look for an alternative before zooming for quite some time.

For mobile design, this means that you should integrate as few gestures as possible. If you have to use actions that are not easy to grasp, you could implement small animations that give hints regarding the usage.

Demand as Little Typing as Possible

It’s no surprise. People don’t like to type on mobile devices. Thus, the necessity of extensive typing should be avoided, as it potentially leads to the client canceling the process, and leaving the site.

The reluctance towards typing is so high, that visitors even accept the rather unpopular social login via Facebook or other networks, just to avoid it.

Messenger services are used for speech rather than text more and more often. (Illustration: Pixabay)

For design, this means that you should entirely forgo type input, if possible. If not, you should go for as few input fields as possible.

Only Use Clear Icons

Icons are one of the favorite toys of today’s designers. You can already tell from the vast variety of download icon sets on the web. Almost every day, at least two pictogram collections enter the market.

Icons are ambiguous too often. (Photo: Pixabay)

This is not good for the user. Users have no interest in deciphering the fiftieth super neat version of the search icon. Change Sciences found out that over 90 percent of the study participants only clearly understand the triangle (play) and the X (close). The hamburger icon, which is quite popular among designers, has been proven to be a bit unclear as well.

Navigation Does Not Belong to the End of the Screen

At a glance, this is a good idea: hold the smartphone in one hand, giving you easy access to the lower parts of the screen. So, placing the navigation there should be logical. Studies, however, show that users always look for the navigation at the top, and tend to ignore menus at the bottom.

This is another circumstance likely related to computer usage, as, since the introduction of the operating system Windows, navigations have always been located at the top of the screen. The last software I remember with menus at the bottom was the good old Microsoft Word 5. The escape key took the user to the menu. Nowadays, no developer would do this, but back then, this was the market leader.

Don’t Forgo a Back Button

When surfing on the desktop, the back button, which always takes us back one step, is one of the most important control elements. Generations of developers have tried to get rid of this undesired behavior, but they were only moderately successful. Thus, it is recommended to go with the masses, and always provide users with options to take on step back.

The swipe feature of iOS is very well made. Here, a swipe to the right takes users to the previous screen. With Android, the arrow icon has to do the job. In both cases, you should still offer an independent solution, like a back arrow in the top area of the screen. Think of the OS-exclusive solutions as additional options.

Other Results of the Change Sciences Team

Multitasking does not happen on mobile devices. The newer approaches that allow for multiple apps to be displayed and used at once are useless on the small screen. Only larger apps make users display multiple applications at once (just to use them one by one anyway).

In contrast to desktop devices sound is an established and even expected feedback method on mobile devices. We all know the classic sound of “pull to refresh”.

The distinction of the first and second screen is blurred. When using the mobile device as a so-called “second screen”, when watching TV, for example, the usage of the smartphone outweighs the usage of the supposed first screen.

Mobile users expect a better user experience than provided by desktop devices. One of the reasons for that is that the small screen forces websites and apps to be designed more economically. This makes them seem clearer and less packed. The fact that there’s less room for ads is regarded with favor as well.

Getting your visitors to engage with a form is not an easy undertaking. Yet, forms are vital for your business. Consider using JotForm Cards. Let’s go ahead and take a look at this friendly way of asking together.

JotForm: The Executive Summary

I should assume that you as a frequent Noupe reader already know JotForm from the inside out. The service is one of our favorite cloud services out there, and we have continuously covered JotForm’s evolution over the years. JotForm is a dinosaur in terms of the web. It’s been ten years since they started out on their mission to provide the world with the best form builder available. Today JotForm is proud to have more than 2.5 million users working with their product.

I found JotForm in 2014. This was the year where JotForm introduced their revamped form designer. They really got me excited that day. I wrote this article. Then, in 2016, I gathered the top six reasons why designers should use JotForm and found a service that kept getting better and better still. But all of this got topped when they released the version 4 of their service in early 2017. Since then I am in love, which led me to write this article.

JotForm Cards work on any device. (Illustration: JotForm)

With JotForm 4 there is nothing left to be desired. You’ll find the most flexible form designer on the market. Did you know that you can even build forms from your mobile device? This is only one of the groundbreaking features of JotForm 4. If you want to learn about all the tiny details that make the service great turn to the mentioned article.

JotForm Cards: Mr. Nice Guy Data Collector

So what could the good people at JotForm now make even better? I would have said, nothing. But then, this is what I said before JotForm 4 got introduced. It seems that they tend to be highly innovative. JotForm Cards proves just that.

Should you be in a hurry, at least watch this small video to get an idea of what I’ll be talking about later on in this article:

Cards Are a Designer’s Darling, And for a Reason

Cards are the new black. Any designer knows that. Card-based design has been the craze for a few years now, and it is still going strong. First introduced by social networks such as Twitter and Facebook, cards are also the native design pattern in Android’s Material Design. And they make perfect sense no matter how you look at them.

The design aspect of cards is not the most important in the context of JotForm’s latest feature. They don’t go forward stacking form cards responsively upon each other or look for the perfect grid layout.

Unprecedented fun in filling out a form. (Illustration: JotForm)

Cards in JotForm follow a way more simple concept. The content of a card is self-contained. One piece of content equals one card. That has been the reason for the introduction of cards on social media, to separate one information from the next.

Regarding usability and UX, separating information through card-based design concepts is perfectly smart. Cards are easy to handle and easy to digest. This creates a feeling of comfort and safety. The user will always know where he stands and what he is supposed to do there. A card is a great road sign.

Forms, on the other hand, are a thing that people love to avoid. Too cluttered, too long, too many questions, too sensitive questions, and poor guidance. That’s what still today characterizes most of the forms out there in the wild. Discomfort and unsafety are what gets easily associated with forms.

Now bring this together with the card-based concept of JotForm Cards and the equation works out. Sounds ingenious? It probably is…

Ask Your Questions, But One Piece at a Time

The idea behind JotForm Cards is so simple; you might wonder why no one else has had the idea already. JotForm Cards conceptually is a full-page questionnaire where you answer one question per screen, then get directed to the next.

Ultimate focus on a single question at a time. (Screenshot: JotForm)

Putting forms this way has a variety of benefits:

Cards are a familiar content unit. Users see them all day everywhere.

Cards allow you to build a design that eliminates distractions. Present your form front and center and do away with all the rest of the content that’s unneeded at the time.

The design of the form can totally be accustomed to the goal of your JotForm Card.

Available micro interactions allow for a form design that’s both clear and fun. Don’t forget the motivational effect of small UX goodies.

Showing users where they are on their form mission through your card set keeps them on track.

Unintrusive card designs are a friendly way of asking. Users are less likely to feel annoyed.

As the process is one step at a time users’ focus is not tested but supported.

With a wide array of customization options, JotForm Cards can be truly beautiful.

Especially on mobile will this way of form filling feel more natural than anything else.

Forms filled out with fun will result in a high response rate.

Should you now wonder what such a product might cost, the answer is nothing. Nothing more than you pay for JotForm anyway which can also be nothing. JotForm is still one of the few that offer a totally free plan without limiting the editing features. For the more professional needs look at this pricing table.

Now, inform yourself about what JotForm Cards might be able to achieve for you. This very contemporary interactive website will answer your questions. If you ask me, there is no better and certainly no friendlier way of asking your visitors for their valuable data. Give it a try!

Bootstrap is popular for a reason. But, if you think there was nothing better, take a look at Propeller.

Bootstrap and Material Design Are no Unity

Bootstrap has been around since 2011. Developed at Twitter, it made an effort to advance the approach of mobile first in web design. It can’t be denied that it was successful. Bootstrap took off right off the bat, was adopted in no time, and is still considered the default framework for responsive web design. Bootstrap can even be found in most responsive WordPress themes.

Of course, Bootstrap has its own ideas of what a website should look like. Though it should be mentioned that it’s not so intrusive that you couldn’t replace every single one of these suggestions with one of your own.

Propeller: Landing Page. (Screenshot: Noupe)

However, if you already know that you want your website to be based on Google’s design language, Material Design, you can make this work much easier. The Digicorp team went ahead and united Bootstrap and Material Design.

Propeller Creates the Unity

Propeller is a Bootstrap in Material Design, which is ready to be used out of the box. In 2017, Propeller was one of the most popular front-end frameworks. It is available for free download under the liberal MIT-license on its own website, but also on Github.

Propeller doesn’t have major demands and does not need to be used to its full extent, so you can also just benefit from individual components. Thus, each of the individual components is available for download as well. If you want quick results, you may be interested in the ready-made Propeller themes, although they are charged for the most part.

Premade Theme Based on Propeller. (Screenshot: Digicorp)

If you have a Bootstrap-based website already, Propeller offers the separate download of the files required solely for the theming. Here, you have to pay attention to the file and folder structure, though. A detailed documentation helps with that. In the end, the result is identical to the result of using Propeller.

Propeller comes with 25 components, which are presented in detail, including a comparison to the default Bootstrap component. Five additional components are supplied by third parties.

Currently, Propeller is based on Bootstrap 3. However, the switch is on the roadmap. While I have yet to use it in a project, Propeller is a part of my toolbox. Definitely be sure to check it out.

PWA, progressive web apps, can only become the standard over the native mobile apps if they have a wide array of supporters. Every web app can be a progressive web app.

What’s a Progressive Web App?

Progressive web apps are web offers that can be used on mobile devices, where they adjust to the abilities of the device and browser that they’re being used on. The more powerful the device and the browser, the more performant the app. For their creation, open web standards are being used exclusively. Progressive web apps are not able to access all device functions yet, making them unfit for some application cases.

Mobile Web Usage is Growing Constantly. (Photo: Stocksnap)

Essentially, PWA are websites. It’s your choice if you turn your ordinary website into a progressive one, as a PWA is nothing more than an enhanced version of existing websites that work on mobile. Enhanced means that it has features and abilities that were previously only known from the area of native development. This new generation of web apps can provide a lot of the functions of today’s mobile apps, making the latter redundant in many ways.

Apart from the fact that a PWA makes the web a bit more open and free, a web app has its very own advantages. A web app can be found via the Google search and can be accessed and used directly. It is not required to localize and install it from one of the app stores. Web apps don’t need to go through the app store process for every update and undergo an extensive update installation.

PWA unite the advantages of native apps regarding the interface usage, the local data storage, the optional display notifications, the uncomplicated and fast availability of web-based offers, and their immediate up-to-dateness that does not require any update processes.

The word “progressive” in the name means that, at the core, the app first shows a mobile view of a URL, and then reacts to the abilities of the user device and browser. This makes sure that a progressive web app works on all devices and browsers, only to different extents, progressively adjusting to the given environment.

Service Worker to the Rescue

The heart of each PWA is the so-called Service Worker that enables the advanced functionalities. A Service Worker is – briefly said – a JavaScript that can work in the background of a web application. This even works when the website is not open in the user’s browser.

Service Workers Cookbook: Landing Page (Screenshot: Noupe)

As Service Workers don’t have a UI, it makes sense to set up a collection of scripts that cover the different basic functionalities. These recipes can be found in Mozilla’s Service Worker Cookbook, for instance, which has amassed a significant repertoire of standard features.

This mainly includes features that every PWA needs to have, like data caching, or fallback technologies for missing online connections. All of the cookbook’s recipes are usable out of the box and are documented thoroughly. The demos are designed in a way that the Firefox developer tools also hand out some useful information if you use them simultaneously.

If you want to look deeper into the basics first, I recommend the small overview of learning resources called Awesome Service Workers

]]>Variable Fonts are Now Available in Adobe and Chromehttps://www.noupe.com/design/variable-fonts-are-now-available-in-adobe-and-chrome.html
Wed, 29 Nov 2017 05:30:30 +0000https://www.noupe.com/?p=103371]]>

The idea of variable fonts has been around for a while. In the future, instead of multiple font versions, line weights and font widths are supposed to be unified in one single font file. With Adobe’s new creative cloud, and Google’s new Chrome, variable fonts can now be used in practice.

One Font, Multiple Line Weights and Font Widths

Until now, different line weights and font widths of a single font had to be divided into individual versions. With well developed fonts, you’ll find versions with a line weight ranging from “thin” to “heavy”. On top of that, there are versions with different font widths, like “condensed”, “compressed”, or “wide”. In combination with each other, dozens of individual versions of a font are nothing uncommon – especially when you also count the italic versions in different variations.

With the new variable fonts, all of these traits are united in a single version. Even better: the line weights and font widths can be adjusted steplessly. Previously, we were reliant on given values. With variable fonts, we are a lot more flexible, as we get to freely adjust the width for different font sizes.

Formally, the new varibale fonts are OpenType fonts of version 1.8. With this format, the traits for the appearance of a font are defined – including the possible font widths and line weights. The respective display of the font with certain values is interpolated via the application, like Adobe’s Illustrator, or Google’s Chrome, for example.

Creative Cloud 2017 Supports Variable Fonts

One reason why there are only a few variable fonts is that it was not possible to use them before. With the Creative Cloud’s new version, however, we finally get to use the new fonts.

For instance, Illustrator and Photoshop both support variable fonts now. When you’ve selected a variable font, there is an additional icon in the “Character” window, which opens a window with three sliders. There, you get to define the strength, width, and tilt of the font.

Variable Fonts in Adobe Illustrator

On top of that, it is also possible to select predefined versions like “Bold Condensed Italic”, without making the settings yourself.

Of course, Adobe also comes with a few variable fonts. From now on, “Myriad”, “Minion”, “Acumin”, and “Source” are variable fonts included in the Creative Cloud.

Chrome 62 Supports Variable Fonts as Well

Almost simultaneously, Google released a new version of its Chrome browser, which also supports variable fonts. Variable fonts can also be provided as webfonts, and integrated in a stylesheet in the usual way.

This lets you create your own font version using the well known CSS attributes “font-weight”, “font-stretch”, and “font-style”, without having to integrate multiple font files.

In the example, we set the line weight of a “<h1>” element to 700, and font width to 75.

However, the mentioned CSS attributes only support common values. For example, “font-weight” knows keywords like “normal” and “bold”, as well as numbers like “100” and “900”. The bandwidth of options, however, is much bigger than the values that the attributes “font-weight”, “font-stretch” and “font-style” know.

The CSS attribute “font-variation-settings” gives you access to all characteristics of an OpenType font, though. Depending on the font, there are additional values available to you, which don’t support the normal “font-*” attributes.

For example, use “wght” to define the line weight and “wdth” for the width of a font.

The second example contains the identical values for weight and width, but was defined via “font-variation-settings” attribute.

The attribute “font-variation-settings” also has the benefit that it can be animated. In conjunction with the CSS attributes “transition” or “animation”, moving text effects can be created as well.

In order to highlight a text, you could change the line weight or font width via animation.

On the website Axispraxis, you get to see what variable fonts look like in action. You choose from different variable fonts, and get to adjust the weight and width using sliders.

Variable Fonts on Axispraxis

Via JavaScript, the according CSS attributes are altered dynamically.

Another advantage of variable fonts – especially in webdesign – is the lower file size. Instead of multiple font files, only one files is needed, containing the font information in a much more compressed way.

Further Browser Support and Application Options

Aside from Chrome, Apple’s Safari supports variable fonts as well. This is not really suprising, given that the new font format was developed by Adobe, Microsoft and Apple. But other browsers will follow suit in the near future.

By the way, not only fonts, but also iconfonts can be realized, allowing you to dynamically adjust the icon’s line weight.

The new format of variable fonts will be a huge gain for graphic and webdesigners.