Best Responsive Layouts And Optimal Form Field Labels

Editor’s note: Welcome to a brand new column in the UX Design section on Smashing Magazine! Each month we’ll pick a handful of popular questions asked by our readers around good practices in designing smart and usable experiences.
They will be answered by Christian Holst, a normal author here on Smashing and founder of Baymard Institute. Prior to co-founding Baymard Institute in 2009, he worked as a usability engineer in the hearing aid, bank card and consulting industries.

A responsive layout[1] is at theory always better than an adaptive layout, in some cases an adaptive layout can be a more pragmatic solution.
An adaptive layout will offer you more treating the design as you only use a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of these with very minor differences, nevertheless they are different nonetheless — which causes it to be harder to understand specifically how your design will look. This makes a responsive layout more challenging to test and predict with absolute certainty. That said, this really is also the sweetness of the responsive layout. By allowing some uncertainty on a superficial level, you gain certainty on more fundamental levels. Sure, you can’t predict with pixel-perfection the way the design works in a 943 × 684 pixel view port, but you can rest assured that it really works well — that the fundamental features and layout structures are meaningfully deployed.
An adaptive layout have their merits because it can be a far more pragmatic solution that is cheaper to implement and simpler to test. An adaptive layout can remain visible as the cheaper sibling of a responsive layout and can thus be appealing if resources are tight. This is particularly true when dealing by having an existing website, in which a complete rewrite isn’t necessarily feasible. In such cases, an adaptive layout can be described as a good (and more manageable) start. Dan Cederholm argues this example well in his article “Adapted”.
One argument often brought up in favor of an adaptive layout when compared to a responsive layout is always that of typography — specifically better treating line lengths and avoiding orphaned header text. Trent Walton has jotted down some good thoughts on the matter. In essence, by changing font sizes (this is easy when using em), you can ensure readable line lengths (50-75 characters per line) in your responsive layout. This leaves the issue of potentially orphaning header text. While one may debate that this really is the nature of the web, you can find cases where seeking maximum treating a website headline makes sense. In these cases, employing a plugin like FitText comes to our rescue, allowing us to avoid orphans.
[1] The definitions of responsive design and adaptive design are manyfold. Jeffrey Zeldman argues that restricting the term responsive design to a technological approach may prove too limiting and that the entire goal is device agnosticism, and that we should thus include fixed breakpoint designs in our meaning of responsive (web) design. Moreover, Aaron Gustafson defines adaptive design as “creating interfaces that adapt towards the user’s capabilities (in relation to both form and function)” with responsive design as a subset meaning “fluid grids, fluid images/media & media queries.” In this answer I’ve intentionally limited the scope of dialogue to layout, hence the use of responsive layout and adaptive layout. The definitions presented within the question are utilized throughout the answer, namely that responsive layout equals fluid grids, and adaptive layout equals fixed breakpoints.

User Interface (UI) Consistency Across Devices Vs. Device-Specific UI Conventions

There are three important factors you have to consider: your focus (as a business), how familiar your users are together with your UI, and just how different your UI and functionality are on different platforms.
1. Focus: There may be branding reasons to keep a consistent UI across your platforms, perhaps especially for lesser-known brands that are still fighting to establish an identity inside the minds of their customers. However, users are typically more familiar with all the device-specific UI conventions compared to those of your brand. Jakob Nielsen often states, “Users spend most of their time on other sites,” and while we’re not just referring to websites here, it is much the identical principle (on a smartphone, simply replace “sites” with “apps”).
2. Familiarity: Are the majority of your users spending hours a day using your service? Have they tried on the extender for any long time? Or are many your users infrequent or newly acquired? Let’s say you’ve a business or productivity service and you know the majority of your users spend lots of energy in everything year long. In this case, familiarity across the applications trumps device UI conventions, since the user has invested a significant amount of time learning your unique UI. On one other hand, if users haven’t spend very much time along with your services and haven’t built strong cognitive and emotional ties to your designs and features, then device-specific UI conventions will generally lead to better usability.
3. Functionality: This has two aspects: a) Is your merchandise only solving a single problem having a single feature, or perhaps is it more advanced? and b) Is there a difference in functionality and features throughout the various devices? If the features you offer on different platforms vary greatly, then adhere to device UI conventions, since cross-platform consistency will yield little benefit in regards to usability (using the identical branding and general aesthetic design won’t profit the user in the wedding the features are widely different — in fact, they might potentially cause harm as the user will think there’s overlap when in fact there isn’t). On the other hand, if you’re solving a single, simple problem, then diverging from device UI conventions is okay since users will very quickly learn your unique UI and you’ll potentially be able to solve the UI problems specific to your feature more readily than the generic device conventions afford.
In short: sticking to device-specific UI conventions where appropriate is really a good, if slightly simplistic, rule of thumb.

Balancing Usability Research with Unique and Creative Concepts

The concept of your product, service, app or website are at the core of your user experience. It’s in which you differentiate yourself in the competition and in which you create true value for the customer. So develop your concept as creatively as you possibly can and allow it to be as original as possible. Then, in the event it comes towards the real-life implementation, read up on user research, study UI conventions and perform usability testing as much as your concept allows.
Usability research and testing are what make your services easier plus more seamless to use (which are truly important qualities inside a competitive landscape), however they usually are not the reason people choose to use a service within the first place — they do that to solve a problem or fulfill a need. So first come up your ingenious new concept, after which draw heavily on user research when implementing the service.
Usability tools are there to test and validate your designs, allowing you to continuously iterate your design based on user behavior and perceptions — an optimization process that should continue throughout the product’s life cycle.