And they’re also important for users. Notifications provide details regarding orders, messages, and other account information.

Thus, it’s interesting to see how notification UIs are evolving. Designers are using their creativity and adding personality. They’re proving that notifications can have both form and function.

With that, let’s take a look at eight unique notification UIs. They use CSS and (in some cases) JavaScript to go beyond the basics.

Neon Notification System with hover Effects by CleverYeti

This notification UI is perfect for websites using dark mode. The look is elegant while also being easy to digest. We’ll give bonus points for including some smooth CSS animation effects.

See the Pen Neon notification system by CleverYeti

Vertical Timeline Notifications by Alina N.

Here’s a neat way to organize multiple notifications. This timeline layout makes each item stand out. The spacing between entries keeps things easy to follow. The search field is also a welcome addition.

See the Pen Vertical Timeline – Notifications by Alina N.

Notification Badge Animation by Valery Alikin

Want to add an element of fun? This bright little UI resembles a “Minions” character. And if the colors don’t get your attention, the splatter animation will do the job.

See the Pen Notification Badge Animation by Valery Alikin

Project Notifications by Landon Messmer

Perhaps the “bell” icon is a bit overused. But in this case, it’s more about what’s inside. This notifications panel is beautiful and functional. It features a clean look and some handy features.

See the Pen Project Notifications by Landon Messmer

Error, Success, Warning, and Alert Notifications by Swarup Kumar Kuila

This notification UI brings a simple yet high-tech aesthetic. With bright colors and simple animation, it’s sure to draw attention. It’s powered by CSS, with an assist from the popular Font Awesome icon library.

See the Pen error, success, warning and alert Messages by Swarup Kumar Kuila

Info, Warning, and Alert Site Components by Dom Jay

These notification components are a fit for long-form content. Use them to display important details in an online course. Or as a call-out box within a blog post. Alerts aren’t just for user-specific info, after all.

See the Pen Site Component – Info/Warning/Alert by Dom Jay

Success, Error, Alert Flat Notifications by AbrarK

Click a button and watch as a colorful notification appears. This presentation uses a flat style reminiscent of Facebook and other popular services. It also features some slick animation.

See the Pen Flat Notify by AbrarK

Pop-Up Social Media Notification by Nooray Yemon

Here’s a highly stylized take on a notification UI. It shows that notifications can go beyond utility. They can also be a branding opportunity.

See the Pen Pop up social feed notification by Nooray Yemon

Serve Notice with These Awesome UI Examples

Notification UIs are now a staple of web design. They’re impacting all types of websites. Odds are that you’ll need to consider them in an upcoming project.

We can certainly stick with a generic look. But there’s an opportunity to do much more. CSS and JavaScript enable us to create a unique user experience. The examples above are just the tip of the iceberg.

The post 8 CSS & JavaScript Snippets for Creating Notification UIs appeared first on Speckyboy Design Magazine.

All digital interactions come with a level of risk from cybercriminals, but some unethical web design practices cross the line into criminality. Learning what “dark patterns” are and how to avoid them can help your brand steer clear of this extremely harmful mistake.

A Fine Line Between Influencing User Behavior and Tricking People

We’ve all experienced it – clickbait that sends us to sketchy landing pages, false pop-up advertisements telling us to click here to prevent computer viruses, emails that use spammy lingo to grab attention.

The World Wide Web has been around for 30 years, and cyber scam artists just as long. Savvy web users know how to identify most scams and avoid them. Unfortunately, unethical web design practices are blurring the lines between true and false, and making it more difficult to spot tricks.

When users browse the internet, they do so with some degree of caution. Most people have developed a healthy wariness, triggered by things like poorly designed websites and annoying pop-up advertisements.

Users have fallen prey to cybercriminals that steal sensitive information or dump viruses onto their devices too often to blindly trust web content. Yet some website designers have found a way to avoid user suspicion and trick them into falling into their traps – using dark patterns in UI development.

What are Dark Patterns?

UI is the heart of website design and functionality. Dark patterns in UI are the tricks websites and apps use to trap users into signing up for or buying something accidentally. The purpose of dark patterns in UI design is to hide the real intentions of the website and/or company from the user until it’s too late.

Companies use dark patterns by taking advantage of the dual readership path – the fact that many readers skim web content.

An unethical company might make certain phrases bold or in a large font, and make the truth of what they’re saying more difficult to find (i.e., in fine print along the very bottom of the page). That way, someone skimming the site would believe the company is saying one thing, when really it’s saying another. Dark patterns are dangerous because they can trick people into taking actions they otherwise wouldn’t have, such as buying a product or subscription.

Some sites may not be aware that the sales tactics they’re using qualify as dark patterns. For example, pushy sales advertisements users have to minimize before accessing the webpage’s content are common tactics many sites use. These dark patterns are becoming less and less acceptable, however.

Google has begun to penalize websites with “intrusive interstitials” – pop-up ads or email capture lightboxes. That’s because users have gotten fed up with these questionable practices, and search engines are taking note.

Learn a few common examples of dark patterns to avoid losing favor with users and falling in the rankings.

Confirm Shaming

One of the most prominent dark patterns found on today’s sites is known as “confirm shaming.” This is when a site generates an email capture lightbox (a window asking for an email address before you can go to the site) with a sentence that makes people who opt out feel ashamed.

For example, a visit to Elle.com will result in a lightbox advertisement, “Get flawless skin.” To make the box go away, you either have to enter your email address or click, “No thanks, I’m not interested in flawless skin.” This passive-aggressive opt-out phrase is an example of confirm shaming. Confirm shaming makes users feel inherently bad about themselves for failing to enter their email addresses and go along with the company’s marketing tactic.

Via confirmshaming.tumblr.com

Some websites use phrases such as, “No thanks, I’d rather pay full price,” to make users feel like chumps for not signing up to receive emailed discounts. Confirm shaming may seem like a relatively harmless way to get a message across, but in reality, it makes users feel annoyed, inadequate, and resentful toward the company. These lightboxes have become red flags for site visitors, and can even be enough to result in a lost sale.

Roach Motels

Roach motels are another pervasive dark pattern tactic on the web. Named for the cockroach baits that lure critters in just to trap them there, roach motels are web design tricks that encourage users to sign up or subscribe – only to find it extremely difficult to unsubscribe. Roach motels make it very easy and enticing to enroll, but almost impossible to remove a user’s name from the list when they realize the deal is undesirable.

Web designers often implement roach motel tactics via “trick questions,” or the process where a user has to deliberately untick boxes to opt-out of receiving marketing material.

Marketers purposely make these boxes inconsistent to confuse users and increase the odds of a person accidentally agreeing to receive emails or marketing materials in the future. Once the user discovers what they did, the unsubscribe button may be difficult to find – or the company may force the user to call customer service to resolve the issue. Roach motels are just another UI trick designed to deceive unwitting users.

Clickbait and Sensational Content

Clickbait is one of the book’s oldest tricks, yet users are still falling into the trap. Clickbait is one of the worst trends in web design, but it is still pervasive. Clickbait refers to internet content (often links) with the main purpose of grabbing attention and encouraging users to click – only to show a web page with much less dramatic or even completely irrelevant material.

Via GitHub

Clickbait lures readers in like bait on a fishing line, using sensational content and buzzwords to capture attention. When the reader takes the bait, the company hooks and reels them in, often trapping users with pop-up ads and email address lightboxes as they do so. Clickbait articles don’t deliver on their promises. They are, in a sense, false advertising. They use hyperbole to intrigue a user enough to make him or her want to click.

For example, a clickbait article may have the headline, “We Surveyed 100 Walmart Employees: What We Found Was Shocking.” The wording makes people curious as to what was so shocking, making them click on the link. After reading the entire article, the reader is sorely disappointed to find that there was nothing shocking at all – only news that isn’t news at all, such as workers unhappy with their wages or encountering rude customers. This is clickbait.

Deceptive Content

Many have become experts in deceptive content writing. Deceptive content serves to trick, fool, or confuse users into taking certain actions. The most common place we see deceptive content is during the unsubscribe process for newsletters and marketing materials. Many websites bring users to an unsubscribe page only to confuse them with a multi-step process and/or buttons with misleading titles.

A great example is the UI for unsubscribing from Daily Yahoo. Yahoo! states the message, “Are you sure you want to unsubscribe from Daily Yahoo?” with a large, bright blue button directly underneath that says, “No, cancel.” The average user would skim the content above or not read it and simply press the blue button. This is a dark pattern that tricks the user into choosing “No, I don’t want to unsubscribe – cancel my request,” when they think they’re requesting to cancel the subscription.

In this case, a user must be savvy enough to read the small, plain print below that states, “Yes, unsubscribe from all marketing messages.” Yahoo! takes dark patterns a step further, however, with a similar message right above that states, “Yes, unsubscribe from this newsletter.” If a user gets past the large blue button, they will likely select the first thing that says unsubscribe. In this case, the user would not be unsubscribing from all marketing materials – just the newsletter. Deceptive content like this is common when users try to opt-out of subscriptions.

Avoid Dark Patterns at All Costs

Dark patterns work to fool people, making it difficult to escape or avoid being caught, to begin with. Dark patterns take users down dangerous paths, often leaving them feeling confused, betrayed, and mad at themselves for falling for the trick. As a consumer or a web designer, it’s best to stay away from dark patterns entirely.

If you believe a marketing tactic is at all ethically questionable, take a different route. Consumers, search engines, and major social media platforms are wising up to dark patterns in UI and beginning to penalize sites for dubious practices. Don’t fall prey to the allure of using dark patterns – recognize and stay away from these common tricks to keep your brand’s reputation intact.

The post Avoiding Dark Patterns in Web Design appeared first on Speckyboy Design Magazine.

As users are able to interact with and edit more more parts of their applications, every piece of information (i.e. location data, timestamping, profile info, mutual connections, etc.) and content (profile images, user-generated content, business listings, etc.) must be designed with that in mind.

In this article, we dive deep into 18 different UI patterns for data and content management.

You should also have a look at Exploring Social Design Patterns For the Web and The Importance of Navigation Design Patterns.

An Overview of The Data & Content Patterns

Here’s an overview of the design patterns we’ve detailed in this article:

1. Favorites & Bookmarks
2. Stats / Dashboards
3. Contextually-Aware Content
4. Hover Controls
5. Context Menus
6. WYSIWYG
7. Autosave
8. Lightbox Photo Slideshows
9. Full-Screen Modes
10. Interactive Content Layers
11. Maps As Backgrounds
12. Group Friends & Content
13. Grids
14. Cards
15. Hidden Information
16. Empty States
17. Direct Manipulation of Content & Data
18. Draggable Objects

1. Favorites & Bookmarks

Examples: Airbnb, Medium

Problem: The user wants to save and highlight content they like.

Solution: Let users save and bookmark content for their reference. This UI pattern is more about personal organization rather than promoting content, and many web apps like Facebook, Gmail and Airbnb let users “star”, “favorite”, “save” or “bookmark” content privately, giving the user a way to come back to any place in the app that they might need later.

As opposed to liking or sharing content that tends to get lost in the timeline as the user’s activity progresses, Favorites and Bookmarks can be used to mark content that the user would need to come back to, for example neighborhoods a user is researching in Airbnb or a particular email that the user wants to mark as important. This UI pattern gives users a private way of highlighting important content as opposed to taking an action on it like sharing or liking it.

2. Stats / Dashboards

Examples: LinkedIn, Medium

Problem: The user wants to easily keep track of their activity and status.

Solution: Present important information and statistics to summarize user activity and status in terms of numbers. Twitter and Quora show users the number of followers and tweets or answers they have for an indication of activity. While some web apps only show number of likes, shares or followers, others like Medium, LinkedIn and Quora also show users more detailed statistics about their activity using Dashboards that used to be limited to business applications.

With the extensive tracking and analytics data available for user interactions, this pattern will become even more popular as users want to track their activity on the system and even analyze how they’re doing in comparison to others.

3. Contextually-Aware Content

Examples: Facebook

Problem: The user wants to interact with content in different ways based on the context without having to take additional actions.

Solution: Change the state of content based on other settings in the application or it’s sizing, positioning, or other attribute. For example, you can auto-play multimedia content as the user scrolls past. This makes the consumption of user content much smoother by eliminating the step where users stop and hit the play button.

In terms of making things easier for users, this pattern makes sense but at the same time it is worth considering the annoyance it can cause. For that reason alone, this pattern is worth considering only for sites and networks that feature a lot of multimedia user-generated content where the user is browsing with the explicit intention of consuming that media. The user would probably not browse through a Vine timeline for any other reason than to watch the videos, so it makes sense. Facebook‘s implementation is a little suspect for the same reason.

4. Hover Controls

Examples: Pocket

Problem: The user wants to have access to controls without cluttering the content view.

Solution: Hide actions and control buttons until a user hovers over the item they relate to. It’s always good to give the user complete control over content, but when an interface has a lot that can be acted upon, each button steals focus away from the content. This UI pattern hides these contextual controls until the user hovers over the content with their mouse, keeping them out of the way until needed. Pinterest puts all focus on the photos, so the “heart”, “send”
and “pin” buttons are invisible until you hover over the photo.

As discussed in Web UI Design Patterns 2014, this fits well with the modular cards UI pattern. Since the buttons appear over the image itself, there’s no confusion about which item they will act upon.

5. Context Menus

Examples: Dropbox, Medium

Problem: The user wants to have access to controls without cluttering the content view.

Solution: Put contextual action buttons in a menu that pops up when the user selects an item or right-clicks somewhere in the UI. A context menu opens up to show essential actions that can be taken in the current view or upon the selected content. This makes things faster for users. Instead of having to scroll up to a toolbar, users can simply perform their desired action in place.

The traditional context menu is triggered by a right click, and applications like Word Online, Google Drive, Evernote and Dropbox that emulate a desktop UI use them mostly for CRUD controls. Another implementation of context menus is a menu that pops up when users select text on the page. Medium puts the “notes” button and “share as a tweet” button behind this kind of context menu, and Quora puts an option to quote the text in an answer.

6. WYSIWYG

Examples: Gmail, Medium

Problem: The user wants to add formatted text and preview what their content looks like without having to worry about markup languages.

Solution: Implement a WYSIWYG text editor that lets users format their entered text without having to go into Markdown formatting or HTML code. This gives users a clear preview of how their content will look once published and can be a great way of lowering the barrier of entry for novice users. In the spirit of direct manipulation, this pattern is widely implemented in most blogging and email web apps, allowing users to edit and preview formatted multimedia content as they would in a text editor on their desktop.

7. Autosave

Examples: Gmail, Medium

Problem: The user wants to protect their data and continue working without having to remember to do so.

Solution: Prevent accidental data loss by implementing an autosave feature in your app. Gmail and Google Docs does this flawlessly, auto-saving your work every few seconds and preventing any “oh, no!” moments. The autosave pattern is an unobtrusive way of doing that without forcing the user to remember to save every few minutes.

Browser crashes, power or connection failures, or even accidentally closing the browser tab are major annoyances that can be soothed when the user is assured that their work hasn’t been lost. With cheap data storage and other UI patterns like User History, it makes sense to preemptively save user data rather than risk losing it by mistake. Of course there needs to be a clear indication that the app is autosaving, and perhaps even an additional “Save” button to provide a greater feeling of control.

8. Lightbox Photo Slideshows

Examples: Facebook, Pinterest

Problem: The user wants to browse through multimedia content.

Solution: Show multimedia content in a lightbox overlay. This modal window creates focus on the image or video content and breaks it free from the confines of the page’s design. It also puts users in a better position to simply browse through the gallery without being distracted with the surrounding “chrome” in the page.

Most implementations of this pattern also dim the background page behind the modal window and that prevents the user from losing their place in the main content view. This can come in handy particularly when paired with an infinite scroll pattern, as in Facebook and Pinterest. It’s faster than loading a new page for each image and also preserves the user’s flow when the want to back out of the multimedia gallery. For photo galleries, a modal lightbox slideshow is an essential UI pattern.

9. Full-Screen Modes

Examples: YouTube, Medium

Problem: The user wants to focus on content instead of being distracted with the UI

Solution: Design a full-screen mode that hides or minimizes the UI clutter around content. This helps users focus on what matters, rather than being distracted by the clutter of the UI. While multimedia web apps like YouTube and Vimeo let users view videos in full-screen mode, other web apps like Medium and Facebook are using the full-screen concept to eliminate unnecessary “chrome” when the user wants to perform particular actions.

For example Facebook lets users browse photo albums in a Lightbox Photo Slideshow (above), which is another pattern that we cover, but this expands to the entire screen. Medium removes all distractions when the user is writing, effectively achieving the same immersive effect as an otherwise traditional full-screen mode.

10. Interactive Content Layers

Example: Airbnb, Yelp

Problem: The user wants to know which items within a content view they can interact with in further detail.

Solution: Layer interactive items to provide an “augmented reality” approach to your content. Yelp and Airbnb provide classic examples of this pattern: Next to the search results for different locations, these sites include a map that highlights each search result with a corresponding location ‘bubble.’

When users hover over the search result, the corresponding location bubble in the map becomes highlighted so that users can immediately see where each result is located. Additionally, users can interact with the map itself, e.g. by dragging to different locations – both Airbnb and Yelp have a ‘Search when map is moved button’ that automatically shows new location bubbles in the new areas of the map.

11. Maps As Backgrounds

Examples: Airbnb, Foursquare

Problem: The user wants to spatially place content on a map to see what’s going on around them.

Solution: Provide maps as backgrounds when the user is browsing for information that’s local in nature. Web apps like Foursquare and Airbnb layer their listings onto the map view, transforming the user’s search and browsing activities into an immersive experience. This makes sense for most location-based web apps which provide users information about localized content because it helps them place it according their own location on a map in a way that’s more intuitive than just browsing a list.

12. Group Friends & Content

Examples: Google+, Google Play Music

Problem: The user wants to organize content according to their own groupings

Solution: Allow users to sort and organize friends and followers inside the app. Google+ and Facebook among others allow users to group friends and content alike. Besides allowing users to sort their friends, web apps like Google Play Music and Ebay allow for content to be categorized into playlists and collections that not only help them organize the huge amounts of user-generated content for their own convenience, but also create a way for them to share these collections with their friends and followers.

As content of all forms – including friend profiles – continues to proliferate, the ability for users to curate and organize things in a way that makes sense to them becomes more important.

13. Grids

Examples: Pocket, NYTimes

Problem: The user wants content to be organized.

Solution: Show snippets of content in a grid. Spotify and Google+ present all their content in a grid, as do Pinterest and Digg, effectively separating each item from the other while maintaining a structure. Grids are a great alternative to the simple list views and work extremely well for content that can be represented visually, making it much more enjoyable for users to scroll through lots of content.

Other sites that are content heavy, like NY Times or CNN can also benefit from a grid layout to help provide some visual structure to the various pieces of content. Some like Pocket and Groupon also allow users to toggle between the grid and list views depending on their preferences.

14. Cards

Examples: Twitter, Google+

Problem: The user wants to browse through content quickly and interact with it, without the detail views cluttering up the UI.

Solution: Present snippets of information in bite-sized cards that can be manipulated to show more information if the user wants it. Popularized by the likes of Pinterest to show large image thumbnails in a compact layout, we see “card” views now being implemented in a variety of web apps beyond video and photo galleries on the web, and often this is combined with a Grid pattern.

This pattern works best for “modules” of data that can be viewed or manipulated individually, like posts on Tumblr or Facebook. Cards are a way to allow users to browse and discover all kinds of content in a more engaging way while accommodating responsive design trends, as well as social feed patterns.

15. Hidden Information

Examples: Medium

Problem: The user wants quick access secondary information that’s not usually necessary to show.

Solution: Hide contextual information that’s not essential behind the UI but make it accessible for power users. Medium hides comments behind a number, subtly showing users that there’s additional information available.

This keeps the user’s focus on the primary content without distracting them with extra clutter in the UI. As users become familiar with the system, the visual shortcuts become easier to spot. Google+ achieves the same effect by hiding multiple tags on each post and marking it with a colored bar to indicate extra tags other than the first one that is always visible.

16. Empty States

Examples: Airbnb, Pinterest

Problem: The user needs to know why a section of the application is empty and what to do next.

Solution: Make sure your UI provides a good first impression by designing for the “blank state,” that is the condition when there is no user data. This is the natural state of your UI and the first thing a user sees. It is also the point where many users decide whether its worth it to continue, so designing the empty state is very important. This is a great place to show some examples that will help users get started or simply to show them instructions on how to proceed.

Airbnb shows a mockup of how a particular section would look like once it’s populated by the user’s content, while Pinterest takes the opportunity to guide the user through what next steps they should take; other sites like Tumblr and Medium give users hints on what the empty area is and what it should be once the user takes a certain action.

17. Direct Manipulation of Content & Data

Examples: Asana, Facebook

Problem: The user wants to interact with entered content or data in a direct and intuitive way.

Solution: Allow for content to be edited directly without having to transition between editing or deleting modes. Letting users work with data directly on the screen can make your UI more engaging by eliminating the extra layer of interaction provided by a button or context menu. Instead of selecting the item and then toggling between individual CRUD (Create, Read, Update, Delete) states, users of Asana for example can directly tap on task names to edit or delete them.

Other sites like Tumblr and Medium follow the same principle however they do include a toggle which moves the user into an editing mode. This pattern is an alternative to the WYSIWYG pattern discussed earlier but goes ahead of just giving users a preview of what their formatted content will look like, showing them also how it looks in context of the surrounding content as well.

18. Draggable Objects

Examples: Asana, Google Play Music

Problem: The user wants to sort and organize items in a way that makes sense to them in the current view without pogo-sticking between master and detailed views of content.

Solution: Content can be picked up and rearranged, or simply dragged across to perform an action. One great example of this pattern is when you’re arranging items on the homescreen, but we see this being implemented in a lot of web apps as well.

Google Play Music lets you drag and drop songs in a playlist to rearrange the order in which they’re played. Since this is a very interactive action, you should make sure the UI provides visual feedback in the form of animations or color changes to clearly indicate that something is happening. For example, items being dragged in Asana are highlighted with a shadow. Another visual cue is highlighting the drop target, that is the location where the item will fall when the user lets go.

Keep Your User Organized

Keep track of where your users are supposed to be interacting with data and content, whether they ever view those sections of the application, how often they interact with them, where they’re coming from and going to in the application (i.e. the user flow) and so on. Keep rearranging, re-sequencing, re-sizing, and tweaking those controls until you get more of the desired actions. And, of course, think deeply about how the user is actually using your mobile application when they’re viewing and engaging with the data and content – make sure you’re new and existing not missing something obvious when designing your app.

For a deeper look at how some of the hottest companies are implementing data and content management design patterns ( and 50+ other patterns), feel free to check out the e-book Web UI Design Patterns 2014. Use what you need and scrap the rest – but make sure to tailor them to solve your own problems and, most importantly, those of your users.

The post A Deep Look at Data & Content Design Patterns appeared first on Speckyboy Design Magazine.

In order for us to figure out what we are looking at, our minds tend to look for repeating qualities. The human brain would then, based on learned behavior, try to form conclusions as to why these patterns occur.

Pattern recognition is a cognitive process that is largely unconscious. A baby can recognize the inflections of his parents’ tones and tell if they’re happy or upset, clouds can form recognizable shapes, while some even see the image of a deity on toasted bread.

It is this piece of human psychology that encourages designers to apply tried-and-tested UX patterns when designing websites.

And while a designer would feel the need to be creative – to build something that is uniquely theirs – breaking the mold often results in visitor confusion and ultimately works to the detriment of a website.

UX Design Patterns: Significance and Importance

For over two decades that the internet has been around, designers have gained a wide understanding of user problems and their respective solutions.

These are called UX Design Patterns – the repeatable design solution to recurring visitor problems.

In those 20 years of internet history, designers have relied on proven interface elements. After being exposed to the same designs, users started to trust what is familiar.

For example, when a visitor goes to a travel website, they come with certain expectations of what they need to see before fully engaging. This process usually happens in just a span of a few seconds.

Upon searching for a hotel, for instance, clicking on photos is expected to generate a broader description of the hotel’s amenities. They have come to expect this, because of all the other websites they’ve previously visited that follow this design.

Breaking that pattern would disrupt a user’s expectations, resulting in confusion and eventually leaving the website.

Users are unconscious of the fact that they have learned such behaviors or that they have come to expect certain patterns. Still, they look for it. That is how they behave, and consequently, judge a website.

The key then to a UX-optimized design is to make sure that a website feels natural and intuitive for the users.

Provide users with design that feels complete, thereby engaging on an unconscious level. When they encounter this kind of design, they would have no problems interacting with the website.

In short, designs should be easy, engaging, and visually inviting.

Reinventing the wheel is generally not advisable, especially when there are patterns already in place – patterns that have been tested time and again for usability across browsers and devices.

Are UX patterns and UI patterns similar?

If we are going to the nitty-gritty of their definition, UX refers to the process of optimizing a website for effective use, while UI refers to the presentation of the website itself.

But in the context of patterns used in designing, these terms are interchangeable.

UX and UI can often be seen when it comes to pattern libraries available to designers.

Pattern libraries collate resources and examples of designs based on usability tests, personal experience, company standards, and recent trends. Some of the best pattern libraries out there include MailChimp, UI Patterns, Little Big Details, and Design Details.

The Importance of UX Patterns

UX patterns go back to the core of why designers do their work: to give users the best experience.

Being a designer requires an eye for what is visually appealing. It is understandable then that creativity and artistic drive would come into play when optimizing the UX of a website.

Adapting available UX patterns do not necessarily mean a boring, cookie-cutter design that will not stand out from all the existing websites out there. Rather, think of it as giving your users more impetus to engage with a website.

The bottom line is that designers design for users. Keeping them engaged and eventually converting them is the priority. And patterns would help achieve that.

Below are a couple of benefits websites will gain from UX patterns:

1. Reduces users’ thinking time

One of the many pain points of users online is that they do not have the time nor the patience to figure out how a website works.

They will always look for the easiest way to accomplish a certain action on a website, be it signing up to newsletters, searching for specific pages, or making an actual purchase.

Using patterns allows websites to make human psychology work to its benefit. Faced with familiar elements, people will have less time think and more reason to move to doing another task within the website.

This is not to say that a designer cannot modify an existing pattern. Changes can be applied, but they have to be justified by solid user data.

2. Designers will not need to constantly reinvent the wheel

Google itself said that users actually prefer simple and familiar designs. Complicated layouts would only drive away site visitors.

Designers can use this to their advantage.

Rewriting a design from scratch would take a lot more time as opposed to copy-pasting existing code. These are not just any code; these are codes backed with usability testing over the years.

With the time you save, you can devote that to the more enjoyable part of designing – creating and tweaking codes.

Case Study: Quantitative Analysis of Using UX Patterns

To further drive home this point, Shay Ben-Barak conducted a case study with one goal in mind: to demonstrate the decrease in user performance when using a non-conventional design.

Here are his findings:

A. Goal of the Experiment:

Ben-Barak wanted to prove his hypothesis by having the test subjects use the standard keypad and the disruptive keypad:

The goal is to measure their performance based on the difference in reaction times, as well as the number of mistakes committed when using the two keypads.

B. The Experiment:

Using a keypad app, the participants were asked to dial a 10-digit phone number they have memorized by heart.

They were to dial the number twice – once on the conventional keypad, and once on the disruptive keypad.

Performance is measured based on the time it took to dial the number on each of the keypads, as well as the number of taps on the backspace button.

C. Findings and Conclusion:

Out of 150 test subjects, 130 were deemed valid pairs after eliminating subjects due to various factors like easy-to-type numbers (12345…) and technical issues.

The results are as follows:

Based on the table, using the disruptive keypad took users a longer time, specifically 46% more, to type a ten-digit number.

Half of the test subjects (50%) using the disruptive keypad took more than 10 seconds to dial on average, as opposed to only 15% of subjects that took 10 seconds to dial on the standard keypad.

Interestingly, 22% of the number pairs didn’t match, implying that the disruptive keypad became too confusing that participants weren’t able to dial the right number at all.

Lastly, there is also a direct correlation between the use of disruptive keypad and the number of taps on the backspace button (correlation value: 0.77).

The non-conventional keypad increased performance time by 30-50%, as well as increased the probability of mistakes committed by users. These findings can prove to be costly to site owners, as changes from what is conventional can affect user behavior negatively.

This experiment further proves the point that UX patterns are needed when designing a website.

The post Why Designers Should Stick To UX Patterns appeared first on Speckyboy Design Magazine.

But what would happen if we broke free from tradition, and tried to live without those pesky habits and patterns?

Let’s dive into the experiment below and discover the results.

What are UX Design Patterns, Anyway?

Put simply, UX design patterns are predictable ways that designers come up with for users to interact with a website.

For a real-world example, consider the keyboard layout on your computer. It has a predictable layout and hasn’t changed in decades.

Web designers frequently ask their website visitors to take actions, that must be easy to accomplish. These tasks include signing up, logging in and out, submitting email addresses, and other important information.

If you’ve ever created a website before, you’ll know the pains of user experience issues from both the front facing and behind the scenes sides.

Since most Internet users tend to access multiple web and mobile applications on a daily basis, the fact that we have to constantly re-enter our information can become pretty tedious. This presents opportunities to implement UX design patterns to make things easier.

How is UI Impacted by UX?

There are many subtle differences between UI and UX:

User interface design is the part of the website that the user interacts with upon arriving at a website. User experience is the broad scope of the site itself, and the emotions and impressions that the user comes across upon looking at the site.

Generally speaking, UI deals with form and UX focuses on function. This means that UX patterns and UI patterns have some overlap, and sometimes the terms are used interchangeably. Some design philosophies consider UI to be an integral part of UX, so you could say that without good UI, you’ll never have good UX.

Some UI libraries contain ideas and solutions that address UX problems, such as user flows and empty states. Other UI libraries simply showcase ideas for creating engaging user interfaces.

Now that you’re up to speed on what UX and UI design patterns are, let’s take a look at the experiment: Testing the usefulness of these patterns.

The Experiment

A UX designer and cognitive scientist recently conducted a simple experiment to quantify the effects that disruptive patterns can have on the performance of tasks.

Intuitively, we feel like when we deviate from convention, it will have negative effects on productivity, reaction time and satisfaction. In this scenario, the main question is to understand if there’s any truth to this nagging feeling.

The experiment used a standard telephone keypad as a conventional pattern and a logical variation of the keypad as a disruptive pattern.

Standard keypads are found universally in telephones that don’t have rotary dials, and we all know how to operate one without much thought, effort or concentration.

However, the disruptive keypad requires cognitive functions. Users simply aren’t accustomed to using it, and there’s a learning curve in making the keypad work.

Most importantly, the disruptive keypad competes with the standard keypad. Our previous experience with using the standard keypad interferes with our ability to use the disruptive keypad with the same amount of accuracy and dexterity.

A web app was developed for the experiment, based on a jQuery keypad for the participants’ inputs, and MySQL to record the data. The experiment asked the participants of the experiment to dial a ten-digit phone number from memory twice: first using a standard keypad, then a second time using the disruptive keypad.

There was a three-second-countdown screen prior to showing the keypads. The web app measured and recorded the performance time for dialing the ten-digit number, as well as the number of occurrences the backspace button was tapped.

The Results

The experiment was conducted using Android and Google Chrome browsers, with roughly 150 subjects participating in the study. Some results were excluded, such as easy-to-type number patterns, such as “1-2-3-4-5”, as well as inordinate outliers that may have occurred due to technical issues. The final count was 130 valid pairs of inputs.

Based on the table above, the average time required to dial a ten-digit number on a disruptive keypad was 35 percent longer than on the standard keypad. The median time to enter the number was 54 percent longer on the disruptive keypad as compared with the standard.

It’s interesting to note that 28 of the number pairs didn’t match up correctly at all. I’d assume that the number was correctly entered on the standard keypad, but incorrectly entered, or even unnoticed, on the disruptive keypad.

Conclusion

There’s a high price to pay for not using UX patterns.

In the experiment, we learned that a non-standard design could slow down performance by up to 50 percent, and greatly increase the likelihood of mistakes. When the familiar conventions are broken, the results are significant issues in usability, function and efficiency.

There’s just not getting past the results that we tend to love patterns. Look for patterns that already exist and work well. We’re hard-wired to love those pesky patterns and the order they bring.

As the saying goes, “If it ain’t broke, don’t fix it”.

The post The Research-Backed Impact of Not Using UX Patterns appeared first on Speckyboy Design Magazine.

In order to narrow down which patterns will work best for you, I recommend a four-step process:

1. Identify your site’s problems.
2. Research which patterns other sites use to solve the problem.
3. Examine how other sites use these patterns
4. Dissect the patterns and choose the elements right for you.

By taking a problem-oriented approach to selecting UI patterns, you prevent yourself from choosing a layout simply because it’s the hip thing to do. While many UI patterns deserve their popularity, you should never base your web designs simply on what’s trending.

Think about how you can help users better accomplish certain goals on your site, then start digging into the most effective patterns.

A Step by Step Practical Framework

Let’s see the process at work with an example: you notice that a lot of your users aren’t signing in when browsing your site.

1. Identify your site’s problems:
Because the users are still coming to your page and spending an appropriate amount of time there, you can deduce that the problem stems from the login and signup processes. The solution, then, would be a way to simplify both processes so that your users don’t mind doing them.

2. Research which patterns other sites use to solve the problem:
You decide to do a little detective work and visit some popular sites similar to yours. Some use a lazy signup, but that doesn’t solve your problem of enticing your users to signup or login. Some others use incentives like extra features or more content, but that doesn’t fit in with the style of your particular site.

Finally, you notice that some sites use a social login, which allows them to login or signup with their pre-existing social media accounts. This sounds like a good solution for your problem and fits the site’s easygoing style.

Source: Jukely.

(Notice that lazy signup, signup incentives, and social login are all different patterns. Which you choose will depend on your site’s specific needs.)

3. Examine how other sites use these patterns:
You take a deeper look at big sites like Spotify, Pinterest, Wunderlist and see how they utilize the social login. You even check sites unrelated to yours to see how they handle the pattern, just in case they inspire you.

Source: Wunderlist.

4. Dissect the patterns and choose the elements right for you:
You notice that different sites offer different social media outlets like Twitter, Google, or LinkedIn – but every site includes Facebook. Sometimes the options are spelled out with text (“Sign up with Facebook”) while other times they just have the social media’s icon situated nearby the login form so you know its purpose.

Remembering the Gestalt principle about how proximity suggests function (which you can learn about in Web UI Design for the Human Eye), you decide only a button with an icon is enough – after all, social login is a popular pattern and your users will likely know these buttons mean they can login with their social media accounts. You decide to include Facebook, Twitter, and Google because those were the most frequent on the sites you checked, and you put Facebook in the top position as the most popular option.

Once you’ve found an effective UI pattern, don’t feel too attached. While UI patterns are great for consistency, you don’t want to be stuck in your local maximum. For example, you might be designing a viral content site and decide that infinite scroll is the best way to make all your content accessible. After all, you’ve seen plenty of other sites use it to great success.

While infinite scroll may produce a better experience than forcing users to click “Next Page” every ten entries, it may not be the best solution. You can only determine that through free-minded brainstorming, wireframing, prototyping, and testing.

Treat UI patterns as a “safe zone” for consistency, then venture outside it one creative step at a time. Know the patterns, respect the patterns, but start your design with a fresh outlook each time. That will ensure your design remains familiar, but still has room to blossom into something new.

My Favorite UI Pattern Libraries & Resources

Because no one person can keep track of every pattern available, it helps to check in with pattern libraries from time to time. These resources collect and compile the most useful patterns available, and organize them for quick reference.

• UI Patterns – A very popular pattern library run by designer Anders Toxboe featuring excellent explanations and hand-picked visual examples.
• Pattern Tap – Fantastic collection of design patterns run by the designer community from acclaimed design agency ZURB.
• Patternry – A subscription-based app of UI patterns for CSS and HTML. Allows customization.
• Capptivate – Mostly animated patterns show the layered interactions for mobile UI patterns.
• Web UI Design Patterns – Free e-book compiling 63 of the most effective web UI patterns along with their use cases. 
• UseYourInterface – Uses GIFs for more comprehensive browsing of mobile UI patterns.
• Inspired UI – Pattern library for Android, iPhone, and iPad that’s very easy to use thanks to the simple dropdown menu.
• pttrns – A cleanly organized pattern library that catalogues the hottest mobile UI patterns from 2012 to the present day.
• Mobile UI Design Patterns – The companion piece to our compilation of web patterns, this ebook features 46 of the most successful UI patterns for mobile devices along with detailed explanations of use cases.
• Site Inspire – While this is more of a traditional web design inspiration gallery, it is an excellent resource for making your own UI patterns more unique. The categorization feature is simple to use, and all the examples are visually stunning and highly usable.

If you’d like to explore even more pattern libraries, Smashing Magazine created this list of over 40 of their favorites.

Conclusion

Good design makes your users happy and eager-to-return, gives a feeling of familiarity, and can be used mostly by intuition. But these seemingly natural aspects are anything but – they must be crafted with effort and know-how to give them that “natural” feeling. Patterns are the tool to this ends, and knowing how to use them is knowing how to create the illusion of “natural.”

To learn more about balancing originality with familiarity in web design, download the free e-book Web Design for the Human Eye: Principles of Visual Consistency. Written for practical applications, the book teaches through analysis of real-world visual examples.

The post How to Choose the Right UI Patterns for Your Web Design appeared first on Speckyboy Design Magazine.

While social features are becoming increasingly important for many reasons, they require careful thinking about the identities and respective communities impacted by them, and how the nature of the product changes with this kind of user interaction. For example, every social network you could possibly link to (i.e. for sharing purposes) is different and serves a different purpose for the users involved. And some information may be really sensitive (i.e. bank information, personally identifiable information, or users may want privacy so they can’t be viewed or contacted by certain people or anyone. These are just some considerations, but the list is virtually endless as mobile applications incorporate more designs around who we are as unique and social people.

In this article, we dive deep into 10 different UI patterns for social design. We’ve also previously delved into the importance of navigation design patterns, you should check that out as well.

An Overview of The Patterns

Here’s an overview of the design patterns we’ve detailed in this article:

1. Achievements & Badges.
2. Auto-Sharing.
3. Activity Feeds.
4. Friend Lists.
5. Follow.
6. Vote to Promote.
7. Pay To Promote.
8. Direct Messaging.
9. Like.
10. Find & Invite Friends.

1. Achievements & Badges

Example: Codecademy, Stackoverflow

Problem: The user wants incremental encouragement and a general sense of progress

Solution: Build gamification into the user’s interactions with the website. Apart from the regular user interactions like listening to a song or posting an update on a social network, many sites also want to encourage users to complete their profile information or interact more frequently with the app. In these cases it makes sense to provide some incentive to the user so that this extra step appeals to them.

Gamification is one of the most popular ways of doing this as it can be a great way of increasing user engagement. Gamification applies the mechanics that hook gamers in order to make the users more engaged on the site. A gamified app is characterized by rewards the user receives as they move through different stages of the “game”. For example users of Codecademy receive points and badges as they complete different tutorials. Stackoverflow and Quora implement the same and provide users with points that can be used to unlock additional features like asking targeted questions or contributing to protected questions.

2. Auto-Sharing

Example: Quora, Vimeo

Problem: The user wants to easily share their activity with their social networks.

Solution: Build an option that lets users automatically share particular interactions with their social networks. A lot of web apps like Tumblr, Spotify and Vimeo are building granular sharing settings which allow users to automatically post updates to their networks based on their activity. These updates can be posted within the app or even shared with external social channels like Facebook or Twitter.

Not only does this help the user engage with their friends and family in everyday activities like listening to a song or reading an article on an external website, its also a great way to build awareness and engagement with the app itself. For interactions like uploading a photo to Carousel or a video to Vimeo, this pattern makes it even easier for users by eliminating an extra step in the process which they are most likely going to take regardless.

3. Activity Feeds

Example: Medium, Vimeo

Problem: The user wants to keep up with what’s happening around them and get quick updates on recent activity.

Solution: Show recent activity that’s relevant to the user within the app. Aside from the obvious Facebook or Twitter news feeds, other web apps that contain an element of social interaction, like Quora or Medium have implemented activity feeds that provide users with an overview of recent activity from their friends or people they follow.

The activity stream can be used to aggregate recent actions by an individual user, commonly used on profile pages; more commonly however, activity feeds are used to aggregate multiple users from the perspective of one user. These feeds are extremely useful in demonstrating different features of the UI by showing how other users are interacting with it, and this also plays a great word-of-mouth role.

4. Friend Lists

Example: Goodreads

Problem: The user wants to keep track of and engage a subset of their friends on the site.

Solution: Show all the user’s connections or friends in a list. Spotify and Airbnb are part of the growing number of web apps that give you friend lists which can be used to help users engage with the app in a better way by keeping up with how people they know are using the app. Combined with the Follow pattern, which we discuss next, a friend list gives users an easy way to keep track of this information, which comes in handy to give some social proof to content that the users are interacting with.

Friend lists also come in handy when the users want to control who they share with. Whether it’s one-on-one communication or keeping track of someone’s tastes and preferences, the way users explore their blossoming friend groups will become increasingly contextual, requiring friends to become a more integral part of the content-consumption experience.

5. Follow

Example: Google+, Pinterest

Problem: The user wants to track and keep up to date with activity on topics or themes, not just people.

Solution: Let users select items that they want to stay up to date with. Aside from the purely social web apps like Twitter, Pinterest and Spotify, they let you select friends, channels or artists that you want to keep track of, and updates are shown in the user’s newsfeed. Whether you have friends or not, there’s endless user-generated content to keep you busy.

Users can gain access to a lot of varied content by “following” the activities and recommendations of other users and this pattern allows them to do so without having to worry about how many of their actual friends are using the app. Content shared with followers on sites like Google+ and Pinterest makes the content curation community possible and users can choose to follow topics, events, themes or even people to get fresh content built by and around the channel being followed. For the same reason friend lists will become an increasingly important UI design pattern, so will following.

6. Vote to Promote

Example: Medium, Reddit

Problem: The user wants to endorse and share content they like.

Solution: Let users participate in content curation by designing a voting system, where content they like can be promoted. The idea of crowd-sourced content curation was popularized by the likes of Digg and Reddit, and today we see almost every app that has user generated content integrate this pattern to bring up the best from the rest. On Reddit, Stackoverflow and Quora, users can vote on content created by other users. Not only does this create a history of what the user has upvoted or downvoted, it also gives users a way of popularizing content and publicly associate themselves with something they enjoyed.

7. Pay To Promote

Example: Quora, OKCupid

Problem: The user wants to highlight certain content above the regular content feed.

Solution: Let users pay to to promote their content. On sites like Quora and Facebook, users can give their posts a boost by paying a certain amount that gives them greater visibility in the content feed above the regular non-paid content. OKCupid allows users to give their profile a boost in views and LinkedIn does the same albeit as part of the paid membership plan rather than by individual content like in Facebook. As discussed in the e-book Web UI Design Patterns 2014, this form of native advertising can be a great way of allowing users to gain traction and greater visibility while maintaining the user’s experience in the platform.

8. Direct Messaging

Example: Spotify, Twitter

Problem: The user wants to send private messages to their friends from within the system.

Solution: Allow users to interact with each other in private messages alongside their other interactions. Instagram and many other web apps offer chat or direct messaging as an integral part of their experience. Private chat UI design patterns will continue to blossom across many web apps, not just traditional “social networks” now that users are finally comfortable sharing more private things online and they have substantial breadth in the content they’re generating online.

9. Like

Example: YouTube, Pinterest

Problem: The user wants to rate content in a simple way without having to worry about the degrees to which they like it.

Solution: Simplify rating controls by making them binary choices – the user either likes it or dislikes it. Eliminating the fine-grain of stars and rating scores, this makes rating things easier for users as well as interpreting them. If I liked a video, should I rate it 4 stars or go all the way with 5 stars? YouTube and almost every application lets you like (or even dislike) everything in a binary way instead. A lot of web apps provide a way of showing appreciation by simply “liking” or “hearting” content.

10. Find & Invite Friends

Example: Pinterest, Airbnb

Problem: The user wants to experience the application with their friends.

Solution: Make the invitation process simple and easy to complete. Since word-of-mouth and referrals are a huge driver of growth especially in consumer applications, you’ll see this UI design pattern proliferate and evolve even more. Providing users with a way of connecting with and sharing the app with friends also gives them a better, more immersive experience even if just in terms of more content. The invite feature can be built into the onboarding pattern or even as the empty state design, both of which we’ve covered earlier.

Let The User Socialize

Keep track of where your users might want or need to socialize, whether they ever view those features, how often they use them, where they’re coming from and going to in the application (i.e. the user flow) and so on. Keep rearranging, re-sequencing, re-sizing, and tweaking those controls until you get more of the desired actions. And, of course, think deeply about how the user is actually using your mobile application when they’re trying to socialize – make sure you’re not missing something obvious.

For a deeper look at how some of the hottest companies are implementing new and existing social design patterns as well as 50+ other patterns, feel free to check out the e-book Web UI Design Patterns 2014. Use what you need and scrap the rest – but make sure to tailor them to solve your own problems and, most importantly, those of your users.

The post Exploring Social Design Patterns For the Web appeared first on Speckyboy Design Magazine.

Once someone starts using your website or web application, they need to know where to go and how to get there at any point. If they can’t navigate through your your application easily, you’ll quickly lose them. Thus, designing effective navigation in your web application is crucial.

An Overview of The Patterns

Here’s an overview of the design patterns we’ve detailed in this article:

1. Jump to Section
2. Single-Page Web Apps
3. Recommendations
4. Related Content
5. Next Steps
6. History / Recently Viewed
7. Featured Content
8. Infinite Scroll
9. Walkthroughs & Coach Marks
10. Overflow Menus
11. Morphing Controls
12. “Sticky” Fixed Navigation
13. Vertical Navigation
14. Popovers
15. Slideouts, Sidebars & Drawers
16. Links to Everything

1. Jump to Section

Example: Pinterest.

Problem: The user wants to jump through whole sections of a web app or content quickly.

Solution: Create a shortcut button or hot spot that takes users directly to a certain part of a web app, typically at the beginning or end but more commonly other specific points.

For example, users can click a tab or button to scroll to the top of the page from wherever they are. This comes in handy especially if you’re also implementing the Infinite Scroll pattern (see below) and the page can get really long as new content is loaded one after the other.

If users want to access controls or information that is only visible at the top of the page, returning there after several pages worth of scrolling can be a nightmare. Pinterest solves this user headache by showing an unobtrusive “jump-to-top” button that instantly scrolls the user back.

2. Single-Page Web Apps

Example: Gmail.

Problem: The user wants a central place to view or take actions on most or all content so they don’t have to waste time navigating between pages.

Solution: Use modern web development techniques to build a single-page app that doesn’t need to reload itself as the user browses through it. This pattern is more of a complete restructuring of how the web works rather than something you can hack into your app afterwards. In a way, the “page in a single-page app isn’t really a page in the traditional web sense, rather it’s more of a particular data view. Single-page web apps load asynchronously (using AJAX), in that they perform instantly without the user having to wait for separate pages to load between operations.

Gmail is a good example of a single-page app that integrates multiple actions into a single “page”. The trend of single-page designs is a less-hardcore implementation of this UI pattern, where all content can be accessed on the same page. This makes browsing much faster and responsive, blurring the line between desktop and web apps.

For web apps like Spotify, the single-page app pattern becomes essential when you consider that the user might play music in the background but also browse through more music at the same time; having a single-page app eliminates the need for a page reload, so the music can keep playing.

One consideration you’ll need to make when implementing a single-page app is the URL structure. Because content is loaded dynamically using JavaScript, URLs can become useless and accessing a particular view can become impossible if not done right. Web apps like Gmail and Twitter overcome this by explicitly generating unique URLs for each view, which also solves the problem of the browser’s Back button becoming unusable.

3. Recommendations

Example: Spotify.

Problem: The user wants to know which content to view.

Solution: Show content suggestions and recommendations at various points to help the user browse through your content. Using the information from the user’s profile preferences or their past interactions in the app, Facebook, Eventbrite, Spotify and Yelp among many others generate tailored recommendations for their users to help them discover new and related content or connections.

These recommendations can come in the form of “popular” or “recently posted” items. Facebook provides “related” pages based on the user’s interactions with posts in their timeline as well as a more dedicated recommendations section where users can discover new pages and people to follow. The stream of content available to users can be endless especially in social web apps that feature user-generated content. As discussed in Web UI Design Patterns 2014, providing a robust recommendations engine in the UI can be a great way to help them discover new content.

4. Related Content

Example: New York Times.

Problem: The user wants to browse similar content if the current content isn’t exactly what they’re looking for or they simply want more.

Solution: Show similar or related content to help the user find more items that are similar to what they’re currently viewing. Like Recommendations (above), this is becoming an essential UI pattern for web apps that feature user-generated content, except rather than tailoring the suggestions based on the user’s preferences or previous activity, Related Content is more about showing related items based on the way they are categorized and tagged.

Amazon, TIME and New York Times are good examples of sites that show items and stories similar to the one currently being viewed. Medium takes this a step further by allowing readers to suggest related content by adding a link to the article’s Further Reading section.

5. Next Steps

Example: Quora.

Problem: The user wants to know what next steps to take after finishing a task.

Solution: Give the user a clear list of next steps that they can follow to enrich their experience. Quora for example creates a to-do list for users to follow to complete their profile. LinkedIn does the same by showing a list of sections the user can add to their profile, pairing it with the Completeness Meter pattern to provide users with an incentive.

Most complex web apps have multiple user flows, so providing users with a to-do list can be a great way of guiding them along. Another pattern this can be paired well with is Related Content; Medium does this well, by showing the teaser for another article when the user reaches the end of the current one. This keeps the user engaged and immersed in your UI.

6. History / Recently Viewed

Example: Amazon.

Problem: The user wants to recall what they interacted with last.

Solution: Let users pick up activities where they last left off. For example, Amazon keeps track of the user’s browsing history and shows recently viewed items so that they can get back to them easily if need be. Many web apps also keep track of what the user has been doing and the Facebook Timeline is the ultimate example of this. Not only does a user’s Timeline record posts made and photos uploaded, it also logs interactions with other pages and 3rd-party web apps like Spotify in an interactive history that the user can refer back to whenever needed.

Google Play Music and Spotify keep track of recently played songs. This pattern helps users keep track of content they’ve interacted with and can also serve as a way of bookmarking things to do later.

7. Featured Content

Example: Airbnb.

Problem: The user wants to know what kind of content can be created with the app.

Solution: Feature specific content front-and-center for users without it getting lost in the mix of often time-related content. This content could be paid, popular, new, or some other important variable.

Featured content serves to show users the possibilities and helps them understand what the platform can accomplish as well as the things other users are using it for. Sites like Airbnb, Etsy and Flickr show random content on the front page that helps users explore the site without having to make a commitment beforehand, as well as encourages existing users by helping them reach greater audiences.

On the other hand, it can also help particular pieces of content gain traction by giving it particular importance. Paid or “featured” content can be marked as such to clarify expectations.

8. Infinite Scroll

Example: Pinterest.

Problem: The user wants to browse through all content.

Solution: Automatically load the next set or page of content when the user reaches the bottom of the current page, creating the effect of an infinite scrolling page. This way new content is automatically loaded and the user does not have to wait after clicking on a “next page” link. Infinite scrolling works best when there is a lot of content to show, as with most social media giants like Facebook, Twitter, Pinterest and Tumblr among others.

However while its great for browsing content, especially multimedia galleries, two basic problems are that users can become disoriented and lose their place. If they want to skip to a particular point or bookmark to come back later, infinite scroll can cause problems. Facebook works around this when browsing a Timeline by creating a pagination/infinite scroll hybrid that lets you jump to a particular month or year. Pinterest integrates the Scroll to Top pattern, with a small button that lets users jump back to the start of the page.

9. Walkthroughs & Coach Marks

Example: Slack.

Problem: The user wants to know how to use the different features of the application.

Solution: Design a walkthrough or tutorial that demonstrates how each function works. A lot of web apps have begun using this technique to show users around when they first launch and there are two basic ways of doing this.

Some web apps, like Slack go the route of overlay instructions, highlighting important parts of the UI with “coach marks” to explain what they do. Slack takes things to the next level by integrating a chat bot that helps users set up their profile. This makes perfect sense given that Slack is a chat app, and the “Slackbot” walks the users through filling in their profile information like phone number and display name like a conversation.

Alternatively, Tumblr presents a walkthrough to help the user get acquainted. This walkthrough is also a great time to collect important information that goes beyond simple registrations, much like a setup wizard. The importance of this pattern cannot be stressed enough for any application that isn’t immediately intuitive because the more a user knows about your product, the more reasons they’ll have to come back.

10. Overflow Menus

Example: Spotify.

Problem: The user want quick access to additional options or actions they can perform.

Solution: Hide extra options and buttons in an expandable menu so that they don’t clutter the main interface. Both Facebook and Google use “overflow menus” to maintain very clean user interfaces on their web apps by hiding the most important secondary options in an expandable menu.

This can also be used to show the most important actions in terms of engagement. For example Pinterest keeps a share on Facebook button visible to help speed up a common and desirable user action on each “pin”. Alternatively, an overflow menu can be used to contain additional menu items or actions as they are incrementally added to the UI.

11. Morphing Controls

Example: Pinterest.

Problem: The user wants to perform different types of actions, but there’s limited screen real estate to show all these controls.

Solution: Replace buttons and on-screen controls with alternative functionality. Depending on what the user is currently doing, the UI could entirely replace an element with another, e.g. “do” and “undo” or “add” and “delete.” This makes sense when the alternating actions are related in some way. Pinterest and Facebook use the same button for “like”/”unlike” to save space and also indicate the current state to the user. This UI design pattern saves real estate, makes undoing any action quick and clean, and is an overall playful solution.

12. “Sticky” Fixed Navigation

Example: Houzz.

Problem: The user wants to have access to the menus anytime while on the web page.

Solution: The top, side, or bottom navigation stays in place while a page is scrolled. In some cases, headings from sub-sections may also become fixed while scrolling and replace or be appended to the existing fixed navigation.

The main navigation bar for both Google+ and Pinterest sticks to the top of the page, allowing users to quickly access those menu items and filters whenever they need to. When paired with the Infinite Scroll pattern, a sticky navigation menu can be a great convenience for users who scroll past more than the first page’s worth of content.

13. Vertical Navigation

Example: Spotify.

Problem: The user needs a way to navigate between different sections of the app, but there’s limited space to show this information.

Solution: Important sections of the UI can be presented in a list, which the user can scroll through to get what they want. This also leaves the header and footer of the UI free for more “universal” navigation, such as action bars. Traditionally, most navigation patterns have been horizontal in the form of tabs or buttons. The vertical navigation pattern has emerged as a significant evolution to navigational design to deal with user-generated content like user timelines and infinite scrolling content.

14. Popovers

Example: Facebook.

Problem: The user wants to view relevant information without losing their current place in the UI.

Solution: Show important notifications and additional information in popovers. This UI pattern has the advantage of providing a lightweight and straightforward way of viewing additional information or taking a particular action, but they do so without pulling the user out of their current activity.

Pinterest and Fitocracy use modal popovers for quick actions, and Facebook uses popovers to quickly show snippets of content from the Activity Bar. The popover UI pattern is important for actions like these because they are being performed on the data and this way users always know what these controls apply to.

With the content still visible in the background, the user can tweak sorting options or change the font size without having to go back and forth between the views – it all happens right there. Popovers and modal windows can also be used to display important notifications or notices where it’s essential to get the user’s attention because dismissing them requires a tap or swipe.

15. Slideouts, Sidebars & Drawers

Example: New York Times.

Problem: The user needs a way to navigate between different sections of the app without being distracted in each individual section.

Solution: A secondary section of the application – such as navigation, chat, settings, user profiles, etc. – is tucked away in a collapsible panel hidden under the main section when it is not needed. When accessed, it usually either moves the main section aside or slides over it. Since the slideout is in a separate layer from the main content in the application, there’s a lot of flexibility in terms of how content can be laid out inside the drawer – icons, text, and even simple controls are viable options to provide quick access to important actions here.

Often times, the drawer can be hidden under a “hamburger menu” or a simple arrow that indicates there’s more content there. It’s an easy way to hide all the less important things in a “side drawer” so that you only have to focus on how to distill the most important information in each view. Examples can be found everywhere. Asana, Spotify (search box), and Facebook (chat boxes). Some more specific examples include Houzz, which has a sub-navigation drawer that disappears as you scroll down and reappears back at the top; and the New York Times, which hides a side drawer that appears on the left when the user clicks the ‘sections’ button at the top left side of the page. As you scroll down in Pinterest, an up-arrow button appears for easy navigation back to the top, and in its ‘How It Works’ page.

16. Links to Everything

Example: Asana.

Problem: The user needs a consistent way of navigating through content without being distracted by additional content.

Solution: Most or all user content within the app is linked, giving users the freedom to explore and find the exact information they’re looking for without hitting dead-ends or being distracted by a litany of hyperlinked text, additional buttons, calls to action, etc. that you would normally see on a website. If they want to interact with a piece of content in the app, odds are that they can tap on it and go to a new view for a more detailed experience.

Content-heavy web apps like Asana and Spotify let users explore all kinds of content by clicking on it, for example clicking on an artist or user takes you to their profile, items can be clicked on, table heads can be clicked on to sort and many other actions.

Let The User Navigate

Keep track of where your users are supposed to navigate, whether they ever view the navigation elements, how often they navigate to certain areas of the application, where they’re coming from and going to in the application (i.e. the user flow) and so on. Keep rearranging, re-sequencing, re-sizing, and tweaking those navigation elements until you get more of the desired actions. And, of course, think deeply about how the user is actually using your mobile application when they’re trying to get to certain parts of the application – make sure you’re not missing something obvious.

For a deeper look at how some of the hottest companies are implementing new and existing navigation design patterns as well as 50+ other patterns, check out UXPin’s e-book, Web UI Design Patterns 2014. Use what you need and scrap the rest – but make sure to tailor them to solve your own problems and, most importantly, those of your users.

The post The Importance of Navigation Design Patterns appeared first on Speckyboy Design Magazine.

User interfaces on the web could also be focused on commonplace website elements such as navigation menus and footer boxes. In this article I would like to share some ideas for building captivating user interface on the web. There is no single solution for every web developer to follow. However there are some great design patterns you can take into account when starting on your next web project.

Fully-Loaded Content

Some designers like to go for large content and place this all around the webpage. When you are trying to market a service or product, you need the website layout to stand out among your competition. By loading up your content down the homepage it gives your visitors the option of scanning your content at once, or pursuing other internal pages.

iZettle is a great example of this design trend being applied to the real world. They are a mobile payment company designed to connect into your smartphone device. The homepage features a large slideshow explaining their features coupled with big photography. But as you scroll down you will notice the page is very long, and incorporates much of the data all at once.

As the visitor you can digest this at your own pace without worrying about reloading the page or navigating the website. Although there are plenty of links to switch between, so navigation isn’t a problem. The design pattern of information overload will work up to the point where it is too much to handle all at once. Find that peaceful center where you can offer a large slew of helpful information, but not so much that you are scaring away visitors.

Infinite Scrolling Pagination

I have to believe that most designers have seen this effect used in some websites by now. My immediate consideration is on Pinterest which has seen enormous buzz for a seemingly random new startup idea.

Another great example is from the microblogging platform Tumblr. As you load the dashboard and scroll down you will notice a loading bar appear after each segment. The pagination is loaded dynamically via Ajax without ever refreshing the page. And all of the older page content is still there, so users can go back up at any point. This unique effect can stabilize user interfaces which have tons of pages and lots of smaller block-level content.

Just be careful how you apply this effect onto webpages which may not need it. Sometimes having pagination on your blog is a good thing. Search engine crawlers can find your content a lot easier, and your visitors will have a permalink URL to get back to the 20th or 30th page in your post archives. This is still a newer UI design idea but is catching on and spreading like wildfire.

Vivacious Page Elements

Designers who can make custom buttons and banners from scratch are in a better position for customizing website interfaces. Imagery and unique graphics are some key points to attracting a user’s attention. And to keep people using your interface these graphics should be simple yet flashy and authoritative.

Oatiful has a great website branding which focuses on unique and relatable imagery. First the top toolbar is designed to feel like a banner or page ribbon. All the navigation links are dynamic which slide down to each section on the page.

Additionally each page section has a set of photos related to the topic. Areas on the page such as Promotions and Topping Suggestions use photos and graphics to keep your attention on the section. It is very easy to convey your message when there are images to back it up.

Interactive Thumbnail Galleries

Creating a page listing for your content is not often very difficult. WordPress and other similar CMS’ offer this feature right out of the box. However if you were to customize a listing using thumbnails there is less content presented immediately. This means as the designer you should prepend this content elsewhere on the interface.

Looking at the website gallery CSSbake you can see an example of a their thumbnail listing. The gallery is split based on newer entries and can also be sorted by user rating. As you hover over each thumbnail a small div will slide up to display the website name and current star rating. This effect could be applied to any other metadata, including external links to the websites themselves.

Informational Product Tours

When you are building software or digital products the user interface for your sales website must become a key selling point. Demo videos are one way to go, especially for newer startups and web applications. But you should also consider dynamic product tours which explain components and your overall services.

Check out the website for Slickplan which is an excellent webapp for creating sitemaps. At the top of the homepage you will find a link to stream a demo video of their product. But scrolling down a bit you will also find a featured tour widget complete with various segments and detailed information for beginners.

If you click through the navigation links you will notice each frame is loaded dynamically via JavaScript. Some website tours will send you over to different pages so that you can take a look at the different interface elements. However I believe that dynamic tours can be a much easier solution for most web developers. Your average user does not like being whisked away to alternate pages, and they want to see what your product can do almost immediately.

Organize and Label Content

This final yet intriguing design pattern comes from the new Treehouse website layout focused on educational resources for web designers. Their library includes topics from HTML5/CSS3, jQuery, PHP, Ruby, and even Objective-C for iOS programming. You’ll notice how each of these sections is labeled and has a series of projects devoted to these topics.

When you are presenting information to visitors who may not completely understand what you do, it’s best to lay this out as simple as possible. Pretend you are explaining your website to a child or teenager who has no background information on your company. Icons and screenshots will not always be enough. Sometimes you’ll need to directly explain things point blank – and anyone confused by your website will be very thankful for this.

But don’t take this idea as an argument against using graphics. Icons and badges are the perfect way to capture immediate interest from readers. But to get them moving the rest of the way you may need to grease the wheels. Providing an exceptional user experience isn’t always strictly about website design effects. It also has to do with positioning information and how your webpage content is interpreted by the average visitor.

Final Thoughts

Designing website interfaces is a seriously tough job and requires years of practice to build a solid skillset. Whether you’re creating admin dashboards or frontend website layouts, the interface effects are all built to be used by people. And you have to ultimately consider people as the final judge to any digital interface.

I do hope these tips can get you thinking in terms of brilliant and simplistic user interfaces. Nobody started off as an amazing designer or acquired the skills by just wishing for them. It may take lots of practice before you gain traction and confidence in your design prowess. But keep trying out new methods and find the UI solutions which work best for you and your style of web design.

The post Design Patterns for Creating Exceptional User Interfaces on the Web appeared first on Speckyboy Design Magazine.