Tag Archives: interaction

Thumbnail

Designing A Perfect Responsive Configurator

Here’s a little challenge for you. How would you design a responsive interface for a custom car configurator? The customer should be able to adjust colors, wheels, exterior details, interior details and perhaps accessories — on small and large screens. Doesn’t sound that difficult, does it? In fact, we have all seen such interfaces before. Essentially, they are just a combination of some navigation, iconography, buttons, accordions and a real-time 3D preview.

View this article:

Designing A Perfect Responsive Configurator

Using Media Queries For Responsive Design In 2018

Back in July 2010, I wrote an article for Smashing Magazine entitled “How To Use CSS3 Media Queries To Create A Mobile Version of Your Website.” Almost eight years on, that article still receives a lot of traffic. I thought it would be a nice idea to revisit that subject, now that we have layout methods such as Flexbox and Grid Layout. This article will take a look at the use of media queries for responsive design today, and also have a look at what is coming in the future.

Taken from: 

Using Media Queries For Responsive Design In 2018

Using Media Queries For Responsive Design In 2018

Back in July 2010, I wrote an article for Smashing Magazine entitled “How To Use CSS3 Media Queries To Create A Mobile Version of Your Website.” Almost eight years on, that article still receives a lot of traffic. I thought it would be a nice idea to revisit that subject, now that we have layout methods such as Flexbox and Grid Layout. This article will take a look at the use of media queries for responsive design today, and also have a look at what is coming in the future.

Credit:  

Using Media Queries For Responsive Design In 2018

This Interface Is A (Good) Joke!

For a few years now, a mild debate has simmered over “delightful” interaction design. For some, features that instill delight, as long as they don’t interfere with the fundamental capabilities of the system, sit with pleasure atop Maslow’s hierarchy of needs as redrawn for interactive systems.
Others don’t really care about such features, or place “delight” alongside “frictionless” and “seamless” as just the latest buzzwords (leaving “scalable” and “disruptive” in their dust).

Taken from – 

This Interface Is A (Good) Joke!

Thumbnail

Efficiently Simplifying Navigation, Part 3: Interaction Design

Having addressed the information architecture1 and the various systems2 of navigation in the first two articles of this series, the last step is to efficiently simplify the navigation experience — specifically, by carefully designing interaction with the navigation menu.

When designing interaction with any type of navigation menu, we have to consider the following six aspects:

  • symbols,
  • target areas,
  • interaction event,
  • layout,
  • levels,
  • functional context.

It is possible to design these aspects in different ways. Designers often experiment with new techniques3 to create a more exciting navigation experience. And looking for new, more engaging solutions is a very good thing. However, most users just want to get to the content with as little fuss as possible. For those users, designing the aforementioned aspects to be as simple, predictable and comfortable as possible is important.

Symbols

Users often rely on small visual clues, such as icons and symbols, to guide them through a website’s interface. Creating a system of symbolic communication throughout the website that is unambiguous and consistent is important.

The first principle in designing a drop-down navigation menu is to make users aware that it exists in the first place.

The Triangle Symbol

A downward triangle next to the corresponding menu label is the most familiar way to indicate a drop-down menu and distinguish it from regular links.

1-preview-opt4
A downward triangle next to the menu label is the most reliable way to indicate a drop-down. (Source: CBS5) (View large version6)

If a menu flies out, rather than drops down, then the triangle or arrow should point in the right direction. The website below is exemplary because it also takes into account the available margin and adjusts the direction in which the menu unfolds accordingly.

2-preview-opt7
A triangle or arrow pointing in the right direction is the most reliable way to indicate a fly-out menu. (Source: Currys8) (View large version9)

The Plus Symbol

Another symbol that is used for opening menus is the plus symbol (“+”). Notice that the website below mixes symbols: an arrow for the top navigation menu and a “+” for the dynamic navigation menu to the left (although an arrow is used to further expand the dynamic menu — for example, to show “More sports”).

3-preview-opt10
Some websites use a “+” to drop down or fly out menus. (Source: Nike11) (View large version12)

Mixing symbols can be problematic, as we’ll see below. So, if you ever add functionality that enables users to add something (such as an image, a cart or a playlist), then “+” would not be ideal for dropping down or flying out a menu because it typically represents adding something.

The Three-Line Symbol

A third symbol often used to indicate a navigation menu, especially on responsive websites, is three horizontal lines.

4-preview-opt13
Three horizontal lines is frequently used for responsive navigation menus. (Source: Nokia14) (View large version15)

Note a couple of things. First, three lines, like a grid16 and a bullet list17 icon, communicate a certain type of layout — specifically, a vertical stack of entries. The menu’s layout should be consistent with the layout that the icon implies. The website below, for example, lists items horizontally, thus contradicting the layout indicated by the menu symbol.

5-preview-opt18
Three lines do not work well if the menu items are not stacked vertically. (Source: dConstruct 201219) (View large version20)

The advantage of the more inclusive triangle symbol and the label “Menu” is that they suit any layout, allowing you to change the layout without having to change the icon.

Secondly, even though three lines are becoming more common, the symbol is still relatively new, and it is more ambiguous, possibly representing more than just a navigation menu. Therefore, a label would clarify its purpose for many users.

6-preview-opt21
An accompanying label would clarify the purpose of the three lines. (Source: Kiwibank22) (View large version23)

Consistent Use Of Symbols

While finding symbols that accurately represent an element or task is important, also carefully plan their usage throughout the website to create a consistent appearance and avoid confusion.

Notice the inconsistent use of symbols in the screenshot below. The three lines in the upper-right corner drop down the navigation menu. The three lines in the center indicate “View nutrition info.” The “Location” selector uses a downward triangle, while the “Drinks” and “Food” menus, which drop down as well, use a “+” symbol.

consistent_symbols24
Inconsistent symbols lead to confusion. (Source: Starbucks25) (View large version26)

While using multiple symbols for a drop-down menu is inconsistent, using arrows for anything other than a drop-down menu causes problems, too. As seen below, all options load a new page, rather than fly out or drop down a menu.

arrow27
Using a triangle or arrow for anything other than a drop-down or fly-out menu can cause confusion. (Source: Barista Prima28) (View large version29)

This leads to a couple of problems. First, using arrows for regular links — whether to create the illusion of space30 or for other reasons — puts pressure on you to consistently do the same for all links. Otherwise, users could be surprised, not knowing when to expect a link to load a simple menu or a new page altogether. Secondly, a single-level item, such as “Products”, could conceivably be expanded with subcategories in the future. A triangle could then be added to indicate this and distinguish it from single-level entries, such as the “About” item.

Users generally interpret an arrow to indicate a drop-down or fly-out menu. And they don’t have any problem following a link with no arrow, as long as it looks clickable. It is best not to mix these two concepts.

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
  2. 2 http://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/
  3. 3 http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  5. 5 http://www.cbs.com/shows/bad-teacher/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/07/1-large-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  8. 8 http://www.currys.co.uk/gbuk/index.html
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/2-large-opt.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  11. 11 http://www.nike.com/us/en_us/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/3-large-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  14. 14 http://nokia.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/07/4-large-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2013/08/grid.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/08/bullet_list.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  19. 19 http://2012.dconstruct.org
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/07/5-large-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  22. 22 http://kiwibank.co.nz/
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/07/6-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  25. 25 http://www.starbucks.com/menu/catalog/product?drink=bottled-drinks#view_control=product
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/08/7-large-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  28. 28 http://www.baristaprima.ca/
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/08/8-large-opt.png
  30. 30 http://baymard.com/blog/ux-illusion-of-space

The post Efficiently Simplifying Navigation, Part 3: Interaction Design appeared first on Smashing Magazine.

Taken from:

Efficiently Simplifying Navigation, Part 3: Interaction Design

How Do You Design Interaction?

If you have to design an interface it’s almost obvious to think to begin the process by drawing. But is this the best way? I once casually started by writing an imagined human-computer conversation, and only afterwards I continued by drawing.
This changed my way of thinking and I never went back to drawing first. This article will explain the reasons behind my decision.
I have always been a huge admirer of the guys at Basecamp.

More: 

How Do You Design Interaction?

Team Collaboration And Closing Efficiency Gaps In Responsive Design

Responsive design ushers in complexities that require a more involved design and implementation process. Because of this, the effort has piled up on the front end. Working in silos, where you talk to each other only occasionally or during scheduled meetings, has too many unknowns. Let’s look at how these new challenges create opportunities to work together better.
We have to kill the mentality that there is an assembly line of workers waiting for it to be their turn, and instead embrace more focused collaboration across the project’s entire team.

Visit site – 

Team Collaboration And Closing Efficiency Gaps In Responsive Design

Mental Model Diagram – Cartoon

We tend to carefully create our HTML and CSS, and meticulously place every pixel to our designs. We plan exactly where our content should be placed on a particular site. Among many other decisions we need to make, we always keep in mind to craft a great experience for all our users. But how do we know what our users really want?
One way is to understand the motivations that drive users in general.

Continue at source: 

Mental Model Diagram – Cartoon