In a recent Offscreen magazine issue, Eric Meyer, a famous consultant, author, and web designer explains why he stopped calling himself a “web designer” and prefers the title “experience designer” instead.
In the realm of the design world today, the term “web design” has become something of an understatement, especially when we look at where web design has come from compared to 20 years ago.
The traditional idea of web design has evolved tremendously, especially in the last couple of years. The web is all around us, no matter if we think about smart bubbles, glasses, or other IoT devices. I guess the pioneers of the web, would be surprised in which devices web design can be found nowadays.
Redmine is used by many web teams around the globe. It’s flexible, web-based and runs open source. In this article, we are going to show you how to get more out of your Redmine projects by integrating it with some great Redmine plugins.
But before we dig into the Redmine, we do cover some basics of Redmine.
Reading through Microsoft’s 1995 Interface Guidelines is like unearthing a lost relic. The 381-page tome — for designers creating Windows apps — got me thinking about how much has changed, not only with Microsoft but with software overall. The guidelines are ahead of their time.
Luciano Mammino is a web developer, entrepreneur, butterfly maker and since recently, a book author. Luciano is also one of our guest writers for our own blog where he published great tutorials on how to build fast web applications.
This week we had a chance to sit down with Luciano to talk about his book release and discuss the latest development trends.
On September 7th, 2016, Divi 3.0, as a new way to build WordPress websites, was released.
Divi 3.0 not only brings WYSIWYG-style editing to WordPress but it also makes building WordPress websites way easier. Doesn’t matter if you’re a WordPress developer or a complete newbie, you should definitely consider Divi 3.0.
WordPress is a great tool. In fact, about 50% of all websites out there use WordPress. So, it’s no wonder that when you’re thinking of starting a blog for your company or simply develop a new website, WordPress is one of the first things that comes to mind.
Even though user registration is quite a common thing, it’s also one of the trickiest parts of web design. You need to make sure that your sign-up page isn’t an obstacle for your users by following these tips for designing a better registration process.
Want to learn web development but don’t know where to start?
We all know that the Internet these days provides tons of opportunities for self-starters to do just that; get started. Gone are the days where you are required to pay an exorbitant amount of money to learn the skills needed to succeed.
There are countless amazing developers who are generous with their knowledge posting tutorials online.
Nowhere is this more prominent than YouTube – the world’s second largest search engine.
Building a global SaaS product isn’t easy. You have to localize your product, translate your website, and make sure that everything’s still up and running.
And there might be a major UI problem, which looks like a tiny thing at first but is actually something to think about a little longer. What I’m talking about is the visualization of selecting a language. How can you visualize the option to change languages so that your global audience can choose which language they want to use?
In this article, you’ll find everything you need to know when it comes to designing a language switch for your application or website, including some examples and best practices.
Language Switch Icons
When offering a multilingual software or web services, you’ll end up at some point thinking about a language icon.
A language icon is a visual aid, indicating the existing languages of the used application. The problem, however, is that there’s yet no standard definition on how a language icon or language switcher should look like.
Language Icon Initiative
As I mentioned before there seems to be no standard definition on how a language icon should look like. I might be wrong. There’s a language icon initiative started in 2008 which aims to standardize the language selection icon.
The standard language selection icon looks like this:
But have you ever seen that icon on one of your favorite websites or applications? I haven’t. And our user tests showed that people won’t recognize this icon as an option for selecting languages.
It seems that the standardized language icon isn’t widely used.
Other Language Icon Ideas
So, we weren’t 100% happy with the language icon provided by the language icon initiative. As we continued our research, we found out that a globe icon is a popular icon used for language switching.
The problem with globes? Different people have different associations with globe icons. If you’re a heavy facebook user, you’ll identify this icon as your notification center.
So, definitely no globe icon for us.
The problem with flags and countries
Intuitively, we tend to think about countries when we talk about languages. Chinese = China, Japanese = Japan, and so on. However, there are some major limitations when you start using country flags for your language switcher.
So, why you shouldn’t use country flags:
There are design limitations if you use more than 20 languages for your app. Displaying 20 country flags can be quite messy.
Countries do not represent languages, nor the other way round.
Flags symbolize nations, not languages. It’s that simple.
And I recommend to only use country flags if your product is different from country to country and not from language to language.
Best Practices of Language Switch Designs
So, you might wonder. How should I visualize a language switcher?
If you like country flags and really want to stick with country flags, I’d recommend a solution like the following one:
The US government released a comprehensive guide on web design standards a while ago, so I was curious how they solved the problem of language switching.
As you can see in the screenshot below, USA.gov makes use of a language button and its styling is clearly defined by its web design standards.
Text links for offering language switching option are widely used. Google.com can be named as a great example here.
Language Switcher as part of the Main Navigation
Text links are a great way to offer your website or app in other languages. By embedding the language switcher in your main navigation, users will easily find the option to change languages.
Trello, for example, embedded the language switch in the app settings.
Language Switcher as part of the Footer Navigation
Other websites and applications enable their users to change languages in the footer section of their site.
Facebook seems to be one of the prominent examples for doing so:
Text-based Language Switch instead of Icons
After much discussion and user testings, the result and user feedback leaned towards text-based language switch. So we decided not to use any icon at all.
Why? Because it seems that there’s no language icon available which creates a mutual understanding.
As we already had a text-based language selector on our website, we decided to be consistent.
Language Switch is key for UX
When you offer a multilingual website or product, thinking about the language switch is probably top priority.
Making use of various language icons, country flags, or other graphics can lead to confusion and doesn’t create a mutual understanding of its features. Therefore we at Usersnap decided to use a simple text-based switcher.
A well-designed language selection option is one of the key things that enhances usability and creates a simple user experience for your website visitors and customers.
If you’re still unsure about which design to choose, get some user feedback and conduct some testing. To learn more about how to do user testing download this free ebook How to Build Products Users Love with interviews with Trello, Prezi and HotelTonight.
This post originally appeared on babich.biz, written by Nick Babich. Nick is a software developer who’s passionate about user experience.
Breadcrumbs (or breadcrumb trail) is a secondary navigation system that shows a user’s location in a site or web app. The term came from the Hansel and Gretel fairy tale in which the main characters create a trail of breadcrumbs in order to track back to their house.
In this article, we explore the use of breadcrumbs on sites and discusses some best practices for applying breadcrumb trails to your own website or application. Highly recommended read!