User Experience – Creative Juiz https://www.creativejuiz.fr/blog/en HTML5, CSS3, JavaScript, WordPress Tutorials Wed, 02 Sep 2020 19:04:10 +0000 en-US hourly 1 https://wordpress.org/?v=5.5.3 A One Time Code Input compatible with Keyboard suggestion https://www.creativejuiz.fr/blog/en/tutorials/one-time-code-input-sms-code-keyboard-suggestion-ios-android https://www.creativejuiz.fr/blog/en/tutorials/one-time-code-input-sms-code-keyboard-suggestion-ios-android#respond Sat, 20 Jun 2020 10:55:24 +0000 https://www.creativejuiz.fr/blog?p=7450 The post A One Time Code Input compatible with Keyboard suggestion first appeared on Creative Juiz.

Ones of the more painful experiences on mobile come with infinite online forms you have to fill in here and there. What about optimizing those experiences step by step? Today I propose to you a solution for One Time Code input: You receive the SMS with a code, your keyboard suggest-it to you, one tap, […]

The post A One Time Code Input compatible with Keyboard suggestion first appeared on Creative Juiz.

]]>
The post A One Time Code Input compatible with Keyboard suggestion first appeared on Creative Juiz.

Ones of the more painful experiences on mobile come with infinite online forms you have to fill in here and there. What about optimizing those experiences step by step? Today I propose to you a solution for One Time Code input: You receive the SMS with a code, your keyboard suggest-it to you, one tap, done! Ok let’s go!

Usually when I propose a form, short or long, I want to optimize the experience to make it as less painful as possible. To do so I study the behavior of my users by testing solutions and by enjoying the features that devices bring with new hardware and software versions.

Even if this article looks like a technical one, it comes from user research and some usability rules:

  • Input form matches the lenght of the expected data,
  • The shapes help the discoverability and ease the intent,
  • Input assistance by guiding the user,
  • Error anticipation by preventing formatting errors.

The demonstration

“One tap, done!”, yes, you are in right not to trust me, but here is how you can test it.

  • Go to the demonstration page on CodePen: One Time Code Demo.
  • Send yourself a SMS with the following text:
    Your verification code is 133-742
    The SMS text
  • Go back to demonstration page and touch one of the fields.
  • Your keyboard should suggest you the last code received.

Sometimes, android just doesn’t care about all of that, it depends on the over-layer of your provider or constructor, or the keyboard you installed and its settings. But if you are on the latest version of iOS, you should be able to manage that like a pro.

How One Time SMS code works?

To make the magic happen, the operating system exposes the last received SMS code to be used by applications like your keyboard. If the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.

Keyboard Code Suggestion The autocompleted fields

Ok, but how do you ask for this code? It’s quite simple, but you can’t guess it if you don’t know HTML5 possibilities. Among a lot of uncommon knowledges lays the autocomplete attributes and its numerous values. It’s usage is not that hard, you have to match the value of an existing growing list of standard values.

<label for="otc">SMS Code Received</label>
<input type="text" autocomplete="one-time-code" id="otc" name="otc" aria-label="Enter the 6 Digits code you received by SMS">
A One Time Code example

Once you did that, your One Time Code SMS field is ready. No need for more here.

But as I told you, I like being complete in my interface proposition, and I decided to go further with a 6 inputs shaped form.

6 digit SMS code shaped form

I decided to go with a 6 inputs form, but with a 1 input form styled like if it was 6 fields would’ve worked too I suppose. Like I usually say, that’s the magic of HTML/CSS and JS, 1 solution, several ways to reach it.

Why would I do that? Because when the user receive their SMS code, the format is pretty clear: 3 digits, dash, 3 digits. I want my form looks like the code received.

<form class="otc" name="one-time-code" action="#">
	<fieldset>
		<legend>Validation Code</legend>
		<label for="otc-1">Number 1</label>
		<label for="otc-2">Number 2</label>
		<label for="otc-3">Number 3</label>
		<label for="otc-4">Number 4</label>
		<label for="otc-5">Number 5</label>
		<label for="otc-6">Number 6</label>

		<div>
			<!-- https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element -->
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" autocomplete="one-time-code" id="otc-1" required>

			<!-- Autocomplete not to put on other input -->
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-2" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-3" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-4" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-5" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-6" required>
		</div>
	</fieldset>
</form>
The HTML Form

As you can see, I used a fieldset to group the fields under the same legend. Each input has its own label linked thanks to the for and id attributes, as it is recommend for accessibility reason. Despite all those attentions, I’m not sure the solution is that good for screen-readers (maybe a bit too heavy to read), I’ll try to test further after publication and come back to you later.

At the moment, you shouldn’t have the sexiest form of your life. Numeric fields and all those labels… But let’s jump into the CSS part now.

.otc label {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}
This hides label visually

First thing I did is to hide labels visually but not for screen-readers. Code proposed by ffoodd and used in all my projects for a while.

.otc {
	position: relative;
	width: 320px;
	margin: 0 auto;
	font-size: 2.65em;
}

.otc fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.otc div {
	display: flex;
	align-items: center;
}

.otc legend {
	margin: 0 auto 1em;
	color: #5555FF;
}
Global Form width and fieldset styling

Then I gave dimension to my form to center it, and removed some fieldset and legend default styles (mostly borders and spacings), the flex layout is to anticipate the little dash alignment between the fields.

input[type="number"] {
	width: .82em;
	line-height: 1;
	margin: .1em;
	padding: 8px 0 4px;
	font-size: 2.65em;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	border: 2px solid #BBBBFF;
	color: purple;
	border-radius: 4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
Code to style input number

This code is for styling our inputs of type number, with a little trick for our friend Chrome which needs to be styled thanks to pseudo-classes (l.15). That way, you should already have something more appealing: we sized the fields (mostly thanks to font-size) and removed the spin buttons. Now we just need to “group” the fields 3 by 3. Let’s do that, shall we?

input[type="number"]:nth-of-type(n+4) {
	order: 2;
}

.otc div::before {
	content: '';
	height: 2px;
	width: 24px;
	margin: 0 .25em;
	order: 1;
	background: #BBBBFF;
}
The little dash in between

Here I add a dash thanks to a pseudo-element ::before and visually create 2 groups. The pseudo-element act like another child next to all the inputs. If you don’t handle the order thanks to order property, the dash is at the first position. To make it appear at the fourth place I had to tell the 3 last input to be at the second place (order: 2), dash at the first one (order: 1) and others are by default at the zero place (order: 0). Yeah, developers, 0 is kind of first 😀

And voilà!

Put some JavaScript to improve user experience

By splitting the input into 6 inputs, we wanted to improve assistance by guiding the user helping them understand more quickly the format expecting. A more easy to scan information. But for now the form is not usable at all, we made it worst.

We need to cover several things here:

  • When I fill in a field, I go to the next one,
  • When I delete a content (backspace), I go to the previous field,
  • When I click on an empty field, if previous field is empty, I focus it,
  • When I copy/paste a code in the first field, I have to split and fill in the other inputs.

The JS code evolved a bit, it’s more advanced on CodePen, and it’s commented. Go have a look, I’ll update this article later.

Let’s go! I show you the code and explain it just after that.

let in1 = document.getElementById('otc-1'),
    ins = document.querySelectorAll('input[type="number"]');

ins.forEach(function(input) {
	/**
	 * Control on keyup to catch what the user intent to do.
	 * I could have check for numeric key only here, but I didn't.
	 */
	input.addEventListener('keyup', function(e){
		// Break if Shift, Tab, CMD, Option, Control.
		if (e.keyCode === 16 || e.keyCode == 9 || e.keyCode == 224 || e.keyCode == 18 || e.keyCode == 17) {
			 return;
		}
		
		// On Backspace or left arrow, go to the previous field.
		if ( (e.keyCode === 8 || e.keyCode === 37) && this.previousElementSibling && this.previousElementSibling.tagName === "INPUT" ) {
			this.previousElementSibling.select();
		} else if (e.keyCode !== 8 && this.nextElementSibling) {
			this.nextElementSibling.select();
		}
	});
	
	/**
	 * Better control on Focus
	 * - don't allow focus on other field if the first one is empty
	 * - don't allow focus on field if the previous one if empty (debatable)
	 * - get the focus on the first empty field
	 */
	input.addEventListener('focus', function(e) {
		// If the focus element is the first one, do nothing
		if ( this === in1 ) return;
		
		// If value of input 1 is empty, focus it.
		if ( in1.value == '' ) {
			in1.focus();
		}
		
		// If value of a previous input is empty, focus it.
		// To remove if you don't wanna force user respecting the fields order.
		if ( this.previousElementSibling.value == '' ) {
			this.previousElementSibling.focus();
		}
	});
});

/**
 * Handle copy/paste of a big number.
 * It catches the value pasted on the first field and spread it into the inputs.
 */
in1.addEventListener('input', function(e) {
	let data = e.data || this.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.
	if ( ! data ) return; // Shouldn't happen, just in case.
	if ( data.length === 1 ) return; // Here is a normal behavior, not a paste action.
	
	for (i = 0; i < data.length; i++ ) {
		ins[i].value = data[i];
	}
});
The JavaScript to make this form smart

From line 11 to 13 I do nothing more with the Shift, Tab, CMD, Option, Control keys to avoid issues. From line 16 to 20 I handle the prev/next functions. From 29 to 43 I handle the focus aspect. The idea here is that if I touch/click on a field other than the first one, I force the focus on the first field. This is mostly for smartphone users. But to be smarter, if some fields are already filled in, we focus the first empty one.

The last lines of JavaScript are here to handle a copy/paste action, or the keyboard autosuggestion of a smartphone. In that case, all the code content is put into that first field. We take the value of that field and split it to distribute the values in the next fields.

One Time Code: Takeaways

Ok, we did it. But don’t forget this is a Proof of Concept of mine, it might not be perfect but for my case of use it’s way enough. Some little things to recall and take away with you as a TLD’NR.

  • Use autocomplete="one-time-code" to trigger smartphone OTC auto-suggestion.
  • Use a combination of pattern="[0-9]*" and inputtype="numeric" to trigger numeric keyboard on smartphone.
  • When you create rich forms, try to shape the input to the expected data.
  • Don’t forget to test your forms by navigating it with keyboard only, and with a screenreader.

Thanks for reading! I’m open to suggestions in the comments or on Twitter.
Thanks to Laurent for the iOS testing.

Going further with Web Forms and CSS

Did you know that you can style web form inputs like checkboxes or radio buttons with only CSS? Or that you can style input:file for instance? Go further with these articles:

The post A One Time Code Input compatible with Keyboard suggestion first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/tutorials/one-time-code-input-sms-code-keyboard-suggestion-ios-android/feed 0
Self-hosted Design and Project Management Solutions https://www.creativejuiz.fr/blog/en/resources-tools/self-hosted-design-project-management-solutions https://www.creativejuiz.fr/blog/en/resources-tools/self-hosted-design-project-management-solutions#respond Tue, 05 May 2020 14:00:21 +0000 https://www.creativejuiz.fr/blog?p=7160 The post Self-hosted Design and Project Management Solutions first appeared on Creative Juiz.

At the era of Cloud solutions and worldwide shared resources, some big companies are stuck with a strict prohibition of any Cloud service. Self-hosting is a solution for those companies that want to build modern well-designed interfaces. How to do so if you are stuck outside the overall Cloud system? Here are some solutions for […]

The post Self-hosted Design and Project Management Solutions first appeared on Creative Juiz.

]]>
The post Self-hosted Design and Project Management Solutions first appeared on Creative Juiz.

At the era of Cloud solutions and worldwide shared resources, some big companies are stuck with a strict prohibition of any Cloud service. Self-hosting is a solution for those companies that want to build modern well-designed interfaces. How to do so if you are stuck outside the overall Cloud system?

Here are some solutions for designers who feel blocked by the complexity of security whitelists. But first, some definitions to be sure we are talking of the same thing.

  • Self-hosted: said for solutions that are downloadable and installable on secured in-house servers. The idea behind the self-hosting is the total autonomy and management of the data within the company. Nothing goes outside.
  • SAAS: meaning Software As A Service, is a method of software delivery and licensing in which software is accessed online via a subscription, rather than bought and installed on individual computers.
  • API: an Application Programming Interface (API) is a computing interface to a software component or a system, that defines how other components or systems can use it. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.
    In other word, it can help developers connecting to a platform to automate some tasks or hook their program to it.
  • SSO: Single sign-on is an authentication scheme that allows a user to log in with a single ID and password to any of several related, yet independent, software systems. It is often accomplished by using the Lightweight Directory Access Protocol and stored LDAP databases on servers.

This blog post seems to be in contradiction with the current situation, the containment and the fact everybody is looking for Online collaboration tools. But there are some industries where in-house solutions are simply the only legally viable solutions.

Presentator.io – Prototype tool like Invision

Presentator.io is a tool that can be self-hosted on your own servers. If you are familiar with InVision this tool brings you the same level of feature, at least the one I was using before using Figma:

  • High Fidelity prototyping (sticky header/footer, interaction, animation/transition, screens overlay)
  • Collaborative comments on the prototype
  • Shared library of assets,
  • Multiple project
  • Shareable links

For the people who are not familiar with Invision or similar prototyping tool, this tool allows your to create hight fidelity interactive prototypes based on what you designed with your design tool. It seems to integrated to Adobe XD and Figma thanks to compatible plugins.
You can easily push new screens to Presentator to create commentable, interactive and always up-to-date prototypes.

When your prototype is ready, you can share it by creating different type of links depending on the rights you want to give to people.

An example of how you can create custom links for your projects

The tool also comes with a great API which allows you to almost do whatever you want in term of object manipulation. Take a look at the extensive documentation.

More about Presentator

Sketch Measure – The specs of your design

Sketch Measure is a tool that helps you create specifications and inspect the details of your composition by showing to developers styles they can easily translate to code.

The interface looks like a design tool where technical information is put in highligh in the right sidebar.

Sketch Measure Interface

Color, opacity, sizing and other informations like spacing between items are quickly available within the Sketch Measure interface. Slicing is also an option even if, as a designer and front-end developer, I don’t really understend that need.
I let you discover the rest of the tool.

More about Sketch Measure

UserTrack – Self-hosted session recording

If you heard about Hotjar and Fullstory for qualitative analysis, UserTrack try to cover some of those well known features like:

  • Heatmaps (click and mouse mouvements)
  • Full session video recording
  • Basic pageview and visitor graphs
  • Realtime visitors
  • Muli-Domain Tracking
Heatmap shown on UserTrack website itself

Good thing with UserTrack is they promise not to take to much of your Database resources: approximatively 1 Mb for 100 recordings. They also propose asynchronous script that won’t slow down your website.

An example of video session recordings

The tool is not free, but it’s a lifetime payment of $99, which is really cheap for this kind of tool. It includes 6 months of support, free updates, and support for installation. For any other need, the documentation is pretty clear available online.

More about UserTrack

UX Lens – Self hosted video session recording

UX Lens

If you heard about Hotjar and Fullstory, yes, them again, UX Lens covers one simple feature which is Video Session recording from your visitors.

UX Lens Dashboard of recorded sessions

Good thing about doing only one thing is that you know what to do with the tool and won’t need to ignore 80% of the features you will never use.

A video session being reviewed

This tool is not self-hosted by default, meaning there is also a pricing (5$/month) and a service behind it. But in case you are really here for self-hosted solution, here is the documentation about it.

More about UX Lens

Github Enterprise

I already heard funny things on the “Git versus SVN” topic. Some companies keep using SVN because it’s self hosted and secured. The issue comes from the confusion between Github and Git. I won’t go through that, I’ll let you read the linked article. But know that git is something already installed on you computer (when you are on Mac) and has nothing to do with Github.

Self-hosted Github

However,  even Github can be self-hosted thanks to the Enterprise edition. Github entreprise offers almost all the Github.com features, minus the powerful Github Actions, but it should arrive soon, let’s hope.

Here is a list of available features coming from the Enterprise Edition:

  • SAML single sign-on
  • Access provisioning
  • Invoice billing
  • Self-hosted or cloud-hosted option
  • FedRAMP and SOC 2 compliance
  • Dependency insights
  • Priority support
  • Access to Actions and Packages
  • Simplified account administration
  • 99.95% uptime SLA (for the Cloud Enterprise version)

More about Github Enterprise

Gitlab – Self-hosted Git Versionning Control Tool

Gitlab is a Github Competitor proposing cloud and self-hosted solution for Git Versionning Control.

Gitlab - Self-hosted Github

I won’t go into a comparision between the tools, because it’s not the topic here. But you’ll be able to realize what you usually do with Github also with Gitlab.

For the pricing, you can start with a 0$ fees thanks to the self-hosted version, and enjoy the updates of the software.

More about Gitlab

Matomo – Google Analytics and Tag Management

Matomo Analytics

I discovered Matomo when its name was Piwic, some years ago, and I even already used it on this blog, but I don’t use it anymore for personal reasons. However, the tool is really advanced and allows you to cover almost everything you can do with Google Analytics.

Matomo can comes with Tag Management tool. The Tag Manager is package as a Plugin.

If you already use Google Analytics and want to change, you can import analytics data to Matomo.

An example of Matomo Dark Theme

Matomo, as a self-hosted solution, brings you a bit more of fun since it allows theming. You can find a lot of themes, dark ones, colored ones, etc.

More about Matomo

 

Jira & Confluence – Project management

Jira and confluence are both installable on your own servers.
I put the two tools in the same basket because I almost never used one without the other on the companies I worked with.

Jira Software and Confluence can be hosted and used securely on your system or servers to enjoy collaborative work within the entire company.

The only thing you’ll need to think about is to regularly update the packages to keep your softwares up-to-date in order to be able to use all the latest features developed by Atlassian.

A Jira Kanban board

Jira allows you to build a backlog, organize it, create sprint, kanban board, and manager a lot of other features related to Project Management. I use it currently on a lot of projects in a Scrum organization, and it became a must have to manage all the Scrum Events.

Overview of release in Jira

You can ogarnize your backlog for existing or in development projects, dealing with bug tracking, issues, or features by tagging tasks differently. You can even create different kind of board with the same tasks to optimize the presentation depending on the team consulting it.

Confluence is here to help you document your project. We use it to document design decisions as well as business and technical decisions. It’s kind of a do-what-you-want-with-it tool: a blank page that only need to be filled in.

Confluence samples depending on your needs

Possibilities are infinite, so I’ll let you decover the tools further more.

PS. I admit I already use Confluence also to transfer files above 10 Mb to myself to avoid size limitation by email. Heh 🙄

More about Jira More about Confluence

Building Userflow and Mind Mapping

I found a lot of self hosted tools, but all of them were outdated for a long time. I decided to remove this section. Instead, I invite you to read the Stéphanie’s blog post on the same topic: Local and self hosted tools for Banking, Insurance and other institutions. She talks about Xmind, Powerpoint, and other solutions for Card Sorting for example.

SSO SAML and other solutions

I didn’t go through all the solutions because I don’t know your environment, but perhaps you know some tools that could be useful and self-hostable! Share with us in the comment 🙂

And for this kind of company obsessed with the security or the one looking for simple solution to log the employees to the tool they are supposed to use, a lot of well known solution are able to offer SSO SAML option, like:

  • Miro: if you look for a tool that helps you organize your thoughs, your architecture, organize distant workshops with a lot of people collaborating on the same whiteboard with virtual sticky notes. That one is for you.
  • Figma: if you need to design stuff, create interactive and animated prototypes, or high definition mockups, this tool is definitely made for you.

If the tool you usually use is not accepted for security or cloud reasons, like it is, often, always take a look at SSO SAML option for this tool, or simply “[Your tool] self-hosted” in a search engine, most of the time their is a solution for you.

Alternativeto.net is also a great tool to find solutions.

More info: Stéphanie wrote on this topic. I mentioned it already, but don’t forget to have a look at “Local and self hosted tools for Banking, Insurance and other institutions

Icon of featured image named
“hosting” by Maxim Basinski from the Noun Project.

The post Self-hosted Design and Project Management Solutions first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/resources-tools/self-hosted-design-project-management-solutions/feed 0
Design System: Great Tools for building your System https://www.creativejuiz.fr/blog/en/user-experience/design-system-great-tools-to-build-one https://www.creativejuiz.fr/blog/en/user-experience/design-system-great-tools-to-build-one#respond Mon, 02 Mar 2020 22:21:17 +0000 https://www.creativejuiz.fr/blog?p=7151 The post Design System: Great Tools for building your System first appeared on Creative Juiz.

You already know that a Design System is not only a shared CSS file or a Figma/Sketch bunch of libraries. A Design System is made up of 80% human (relationships, sharing, daily work), and 20% documentation, tools and libraries. I want to help you with the small part. To help you with those 20%, I […]

The post Design System: Great Tools for building your System first appeared on Creative Juiz.

]]>
The post Design System: Great Tools for building your System first appeared on Creative Juiz.

You already know that a Design System is not only a shared CSS file or a Figma/Sketch bunch of libraries. A Design System is made up of 80% human (relationships, sharing, daily work), and 20% documentation, tools and libraries. I want to help you with the small part.

To help you with those 20%, I made a little list of tools that helped me and keep helping me in a daily basis, and also some tools that could be interesting for you even if I don’t use those tools. It’s a pretty good addition to the UX/UI Designer Tools list I made for you earlier.

I’ll detail a bit the usage I have of each tool I use, and for the ones I tried once but don’t use in a daily basis I’ll be briefer, even if they caught my attention at some point.

I’ll try to separate Visual Library tools from Coded Component tools, even if, you’ll see, the separation is quite difficult sometimes.

Design System Visual Library

During my first experience of building a Design System, I started with Sketch App but after a while, the library was too big for this poor little Sketch and it started to be too laggy to be able to work.
That’s why after some tests by a colleague of mine, we joined the Figma Community.

Figma – Scalable Design System

Figma is well known by the design community, and it allows you to build efficient Design System and share visual libraries. I did test other solutions like Adobe XD or Sketch, but the  cross-OS compatibility and the way it works matches my way of working on a Design System.

The Team features are really useful for onboarding people in a team of designers. There are Shared Libraries that can be activate on the overall team to kind of force people to used Master Components (Symbols in Sketch) in their design composition.

Screenshot of Foyer Design System visual Library

Those different libraries can be activate on the overall Team, but are all optional. It means that when you create your file to work on an interface using your Design System, you can deactivate the libraries you don’t need. I don’t know why you would need to do that, but you can do it 😀
Our existing System is quite big, but I never notices any lag using it or searching through the big amount of Master Components.

There is also Live Collaboration where you can work on the exact same object in the exact same file. That’s a life saver when you need to rush on a design for any reason.

A demo of 3 people collaborating on the same file (source)

Visitors and contributors can leave comments on the workspace directly, adding several layers of contribution.

A comment on a Design System Component

The fact that all the files are in the Cloud, you don’t even think about backup or cloud service where you have to save your work regularly and think of a versioning tool. Everything is included  into Figma: version control, blame tool, files saved in the cloud. And yes, you can work offline as soon as you already loaded your work, the tool will save locally your work and push it online when your connection is retablished.
For Organizations, if you need to have an enhanced security, Figma allows SAML SSO.

Figma is also all about the community around it: Plugins and Shared files made by the community for free are available and can easily be activated for all your team members. The onboarding for building a plugin is so simple that I’ve made one to prepare your exports for PWA Icons.

The Community page within Figma

Figma is free for up to 2 editors and 3 projects, which is really enough for students or small design teams. But as long as you need to build shared libraries, you will have to pay $12/month/editor.

Learn more about Figma

ZeroHeight – Design and code documentation

Zeroheight is a CMS to manage a documentation, a website that is available for you and your collaborators. The advantage of this tool is that you can synchronize your design file to keep the documentation up to date. It works like a charm with Figma which offers a powerful API.

When I built the Foyer Design System website, I did it with simple HTML files, it took me a bit of time just for the template and the responsive aspect of the website. The structure was based on the existing internal Design System we have at Foyer for our complete documentation. (yeah the public website is not even 5% of the complete documentation)

When I started to work on the CapitalatWork Design System for our internal needs (in-house applications) I needed something efficient with a fast setup. Zeroheight allowed me to build several pages of documentation in a morning.

The tool allows you to build visual documentation as well as technical documentation. It synchronizes your design file ; in my case Figma with the imported Frames, Components or Styles I decided to import and document. There is some pre-made blocks of contents that can easily cover 90% of your needs for a great Design System structure and content.

When designers or developers will join me on completing the documentation, we’ll be able to write it collaboratively at the same time.

Zeroheight is free for one editor, enough to get started, and starts at $15/month/editor. It’s also :

  • Design Tokens up-to-date
  • Synchronized files and Design Assets
  • Inspection of the details of your components
  • Version History (Company offer)
  • Custom Domain Name (Company offer)
  • Private System protected by a password (Company offer)
  • SAML SSO + User Permissions (Enterprise offer)

Learn more about ZeroHeight

Superposition – Design Tokens

Superposition is an app that allows you to literally browse your existing design tokens. Just enter the URL of you website or a page and get:

  • The Colors,
  • The Typography,
  • The Spacing,
  • The Border Radii
  • The Shadows
  • The Motions
  • And the assets.

This list can be exported in several format for CSS, Sass, JS, android, and Swift should arrive soon.

Superposition - Design Tokens Generator

Superposition is a great tool for starting a Design System in an existing environment. Whether you’ve got only one project or several ones using (kind of) the same codes, it’s a good starting point to list all your tokens to better estimate the work to do at merging or simplying this list.

This tool has compatible plugins for Adobe XS and Figma, I can’t enough advice you to use it if you play with existing projects. This tool is free.

Learn more about Superposition

UI Kit and Code Tools

Here are some of the dev-oriented tools I found or use(d) with my team on our Design Systems. Again it’s not easy to separate design and dev on this topic, but those tools will talk way more to developers.

Storybook – UI Components Library for front-end devs

Storybook is made for documenting and create a playground for front-end developers. The tool allows you to build a library of components with infinite variation. The goal is to allow developers to build variations that matches the real use cases of the project(s) they build be used for.

It’s a good tool to keep consistency and to make component evolve with the project needs, without breaking the previous versions.

The component pages are well built and allows you to add as much as tabs and information you will find useful for your team, like: technical documentation, notes, accessibility advices, event documentation, story around the component, etc. You can easily get snapshot of your components to see visual changes or code editions.

The goal of this tool is to create a collaborative technical tool that can also be turned into a complete styleguide. The important part of this sentence is “collaborative”. It helps people work together, but still, it’s just a tool 😉
I’m telling you so because I knew a team that worked with Storybook, but it was a one-man made book, the link was shared by email to the collaborators, and nobody never heard anymore of this Storybook after that. Use the tool you want, but don’t forget to speak to human beings around you.

Anyways, Storybook works well with raw HTML, React, React Native, Vue, Angular, Mithril, Marko, Ember, Riot, Svelte. All the documentation for those frameworks are well documented.

This tool is Open Source and free, and there is a lot of Addons that will make you system really powerful.

Learn more about Storybook

StencilJS – Reusable Components

StencilJS is a powerful tool to build reusable components compatible with a lot of frameworks. It’s ideal when you work in an environment where React and Angular are part of your projects, and not only those. It’s a cross-framework tool.

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

StencilJS has JSX support and is built in a way that it’s future-proof: native Web Components with polyfill, that brings support for all types of environment.

StencilJS

It also brings simplicity into:

  • Visual comparison: UI diff with screenshot,
  • Documentation: with auto-generated component doc and CSS variables,
  • Dev environment: Built-in dev-server for hot module reloading.

We decided at the start of building our Design System that we shall never write JavaScript as long as we are surrounded by different environment (PHP, WordPress, and Angular). “We are writing only HTML and CSS”.
While building our in-house Design System, a need emerged: unify interaction within some more complex components, to keep user experience consistency. A teammate within our Design System Core Team decided to give a try to StencilJS, and it worked quite well.

Learn more about StencilJS

CodeSandBox – Experiment Combinations

I never had the opportunity to use it but this tool seems perfect to test things in a pre-built environment. CodeSandBox allows you to:

  • Use predefined templates of code (blank JS, React, Angular, Vue, Nuxt, Gasby, etc.)
  • Create your own predefined templates,
  • Use community templates to get started,
  • Sync it with Github,
  • See changes in live thanks to the Hot Module Reloading,
  • NPM Support directly within the tool.

CodeSandBox

You can even embed your Sandboxes, which could be pretty handy if you are building an in-house system with rich examples. You can also test third-party compatibility with your existing system before diving into a solution.

Learn more about CodeSandBox

React Styleguidist – Playground styleguide for React.

If your team is working with React, React Styleguidist is a great tool for building Storybook-like tool and play with live documentation of your components.

React Styleguidist

The tool generate a styleguide and allows you to build consistent systems with component variations.

I never used this tool but to me it’s close to what you can do with Storybook, but here it’s React-friendly and only built for that purpose.

Learn more about React Styleguidist

HTML & CSS Knowledge

Yeah I know, it’s kind of weird to consider HTML and CSS as tools, but they really are. You won’t be able to build accessible and strong patterns without those knowledge.

Nowadays, I see more and more “Front-End Developers” being only JS Framework users (yeah users), like children playing with pieces of LEGO they don’t even understand the true nature. To build a Design System, you need someone working on raw HTML, with a strong understanding of Role-ARIA and able to test the components on a lot of browsers and assistive technologies.
You need someone able to improvise custom CSS lines of code to adjust components and build variations of those, keeping the same HTML (article by @shadeed9) to avoid re-work on the implementation side.

You need someone whose expertise is HTML and CSS only because being able to handle all kind of complex layout situation is a full time job, sometimes way more difficult than playing with pieces of LEGO.

If you want to learn a bit more on Inclusive Components, I advise you this great reading: Incluse Components by Heydon Pickering.

Building a Design System is about humans…

Don’t forget that building a Design System is not about gathering the right tools but gathering the right persons around the table, communication and needs understanding.

From left to right: Matthieu, Bastien, Laurent, Steven B., Florentin, Jordan, Julie, Geoffrey, Steven L., Léa — Photographer: Kaorianne

The tools are here to help you build a strong relationship between at least developers and designers. They are supposed to help them speak the same language, filling the gap between those two fields, and serve a common goal: bring a consistency within interfaces for a better user experience.

Choosing the right tool is not always easy, you will have to listen to each other to understand designers and developers needs. To improve you Design System, you have to do exactly the same thing as other products: listen to users, collect their needs and pain points, and build solutions.

That’s the other 80% part. 😊

The post Design System: Great Tools for building your System first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/user-experience/design-system-great-tools-to-build-one/feed 0
User Task Canvas – Collect your users’ needs & activities https://www.creativejuiz.fr/blog/en/resources-tools/user-task-canvas-collect-users-activities-tasks-needs https://www.creativejuiz.fr/blog/en/resources-tools/user-task-canvas-collect-users-activities-tasks-needs#respond Thu, 26 Dec 2019 13:03:29 +0000 https://www.creativejuiz.fr/blog?p=7028 The post User Task Canvas - Collect your users' needs & activities first appeared on Creative Juiz.

It is not always easy to collect all of your users’ needs, especially when you are not necessarily familiar with the context of use or the field in which they work. That’s why we created this downloadable and printable canvas to help you collect needs. Context of the research Julie and I worked for CapitalatWork […]

The post User Task Canvas - Collect your users' needs & activities first appeared on Creative Juiz.

]]>
The post User Task Canvas - Collect your users' needs & activities first appeared on Creative Juiz.

It is not always easy to collect all of your users’ needs, especially when you are not necessarily familiar with the context of use or the field in which they work. That’s why we created this downloadable and printable canvas to help you collect needs.

Context of the research

Julie and I worked for CapitalatWork Foyer Group, a discretionary investment management company. The goal of our intervention was to understand why their existing tools did not meet the needs of the portfolio managers (our end users).

But before we could address the question of “why”, we needed to better understand the context and identify their work habits while understanding their daily lives. Thus, we would have bits of “what”, “who” and “how” that would most certainly allow us to find leads on the “why”.

We wanted to make it easier for our users, and bring a bit of fun too. We looked at creating a card game fast enough to help our managers work with us on this exercise.

The first prototype we tested on a colleague

We had one day to conceptualize them, pre-test them, make them, print them, cut them out and test them the next day.

The prototype tested on the left, the first set printed on the right

Context of use of our User Task Cards

To help our managers, we organized a small workshop with two of our end users, blocked 1 hour for the exercise. In hindsight, the time was not enough and we overran by 15 minutes, where it would have taken 1h30 instead.

Introduce the concept

When you do something unusual with your users, it is important to introduce the context.

  1. Remind the context of the workshop (collecting their work habits)
  2. Announce that you will use cards to help them.
  3. Introduce the cards : Task, Actions/Decisions, Objects/Tools, Interactions/Dependencies. We voluntarily did not introduce the Pain Points, Magic Changes and Meta-cards right away (they’re not all here in the previous images, by the way.) .
  4. Then present an example that is quite simple to understand from everyday life. We used the example of “Taking a shower” which generally speaks to all our users.

When you run your example you need to remind yourself what each card implies and propose an order to present these cards. Order that will not necessarily be respected by your users and that’s totally fine.

  1. Task : this is the task you need to perform. You normally filled in this card with a “I need to take a shower”.
  2. Actions/Decisions : it is about defining what you do to accomplish this task, and the decisions you need to make to accomplish the task. “I turn on the water”, “I wait for the hot water”, “I adjust the type of jet”, are possible options.
  3. Tools/Objects : it is about specifying the tools and objects that you use to accomplish the task. “A washcloth”, “soap”, “a sponge” or “a towel” can be useful objects.
  4. Interactions/Dependencies : it is about providing more context to your task by reminding yourself of the people or other activities on which you depend. “The boilers”, “The cleanliness of the towel”, “The good maintenance of the siphon” can be dependencies.

Our initial mistake was to think that our users could fill out the cards Pain Points and Magic Changes later. In fact, they needed to express what bothers them early on. Give them this card early on by presenting it at the beginning, preserve the card Magic Changes for later.

  1. Pain Points : it represents the blocking or irritating points during the performance of the task. Usually it fills almost all by itself when you talk about tools, objects, interactions and dependencies. “Shower slips”, “Water is cold”, “Moisture rises quickly” can be pain points.

Conduct of the workshop

Once the presentations were made, we suggested that managers complete a few task cards to list them.

Users filling in task cards

However, as they filled them out, they remembered the dependencies and tools they use. We ended up giving them free access to all the cards so that they could express themselves freely. They quickly took the tool in hand. We started making them work together.

Columns of tasks and their context

In order to help them, we completed, while listening to them, the meta-cards, which offer more context to a given task. We only had the “Rhythm” card at that time, but we quickly realized the need for the “Where” and the duration.

After a while, and because sometimes someone may take the lead in the group, we ended up separating the two managers to get more tasks and allow everyone to use their own memory.

At the end of the workshop, we offered the “Magic Changes” card so that the user could imagine their own solution for the Pain Points encountered. At that time we took the example of the shower to present the concept to them. “Having a small auxiliary water-heater”, “Porous shower floor” or “motorized ventilation” can be solutions to the pain points in our shower story.

Many more tasks organized by columns

Once it’s done, group your columns into small stacks for quick access to task information. We used small wooden clamps that are much more practical than paper clips here.

Stacks of our users’ tasks

We obviously had not anticipated everything for this workshop, so here are some additional tips.

Some tips for this workshop

These tips are quite generic. Depending on your users and the context of your work, you will certainly need to adapt the exercise a little. A few things we have seen.

  • Plan at least 1h30 with two users working with you,
  • Be at least 2 designers, it’s easier to support users and not forget anything. Especially if you want to take notes during the session,
  • Present all cards from the beginning, including Pain Points, but except the Magic Changes card, which should be kept for the end.
  • Arrange tasks by column or row to facilitate the completion of each task.
  • You can help to fill in the context cards: “duration”, “where”, “rhythm” without any risk while listening to your users.
  • Your users will probably highjack the game and do what they want with it. Unless you lose too much material because of this hacking, let them do it and be flexible. The important thing is to make it more fun for them and to create an automatism while not forgetting anything.

Experience feedback

At Foyer (the company I work with), we work in an Agile context. We develop features piece by piece, and we test them at each iteration with our end users. Each development comes from a need that we discovered thanks to this workshop and a proper story mapping.

After a few months of development and several weeks of use, the feedback is more than positive and the adoption of the tool is unequivocal: excellent. One of the many verbatim comments from our users that has brought me the most as a researcher is:

It’s surprising, you’ve managed to understand our business without knowing anything about it at first.
— a user

Download the User Task Cards for free

You will find the latest version of the cards available for free here. Be aware of the license.

User Task Canvas Cards

Download the cards

This is a version 1.0 that I will update over time based on the feedback and improvements that we receive.

User Interview Guide

After a first session with these cards, I presented the concept to Stéphanie Walter. She modified it to create a user interview guide.

Presentation  of the User interview guide

The “user interview guide” takes the form small A5 booklet you can print. It’s dived in 2 parts:

  • The cover helps you collect information about the users: role, daily life, tools (and an open-ended question section).
  • A4 “Task sheets” lets you gather all the information linked to the user tasks on one single sheet.

The format is therefore a little different from the cards. It was designed to be used in 1 to 1 interview. It gives a common base so that different people in the same research team can conduct structured interviews and then share and compare the results with each other.

Guide d'entretien imprimé et plié

How to use the interview guide

Here are some tips for using the guide. First of all remember: this is an interview, basis user research rules apply. Ask open-ended questions as much as possible, try not to bias your users, etc.

  1. Print once the 1st page (the grey one). You will need one per user interview. It will be used as a cover. Fold it in half.
  2. Print several task sheets and slide them into the cover to create a kind of A5 guide (Stéphanie: “In my experience, I needed between 3 and 6 per user on my last project”).
  3. Start the interview with the first page of the grey cover. This lets you to better understand the person but also to put them in the “mood” for the rest of the interview.
  4. For each task of this person, use and fill in a A4 task sheet (Stephanie: “The purpose is to use this template as a guide, but remember that this is an interview: it’s supposed to be a discussion. Fill the boxes as the conversation progresses but don’t force the structure. Even better if you can have one person taking notes while filling in the template and another one leading the discussion it’s perfect”)
  5. At the end of the interview, return to the second half of the cover page for some open-ended questions.
  6. When you are finished, always remember to thank the users for their contribution and help. Fold your task sheets and put them the grey cover so that your don’t lose anything. (Stephanie: “I recommend scanning them ASAP to make sure you REALLY don’t lose anything”)

Planche A4 remplie

There you go! You will quickly find the information on this user.

Do not forget to identify your users either with a name, or with a number if you anonymize the data. There’s an identifier field on all pages for that purpose.

Download the interview guide

You will find here the last version of the guide. Be careful with the licence

User Task Canvas Interview Guide

Download the guide

It is a first draft.

Feel free to comment and share your use cases with us, here or on Twitter with Stéphanie Walter or me (Geoffrey Crofte). We even invite you to share your experience while quoting this article to always mention the original source. Here is all you need to know about the licence:

License of the files

Some simple rules to respect. Those files are under the CC SA-BY 4.0 License. Thanks for reading the details of the license and the following:

  • You can use these files freely and without charge, even in a commercial context.
  • You can modify and adapt these files, but you are required to specify the modifications made in order not to assign them to the original authors.
  • You are required to cite the original authors of these files (Stéphanie Walter, Julie Muller and Geoffrey Crofte) and to link to this article or the link at the bottom of the page of the downloadable PDFs.
  • You are required to share your creation and modifications under the same license.
  • You are not allowed to apply legal conditions or technical measures that would legally restrict others to use the Work under the conditions described in the license.

Thanks for us and have fun!

Get your freebies

Please tell me what kind of content you want to receive, I’ll send you those freebies and 2 more freebies by email.

Type of content you want:

The post User Task Canvas - Collect your users' needs & activities first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/resources-tools/user-task-canvas-collect-users-activities-tasks-needs/feed 0
There is no “Myths of Color Contrast Accessibility” https://www.creativejuiz.fr/blog/en/user-experience/there-is-no-myths-of-color-contrast-accessibility https://www.creativejuiz.fr/blog/en/user-experience/there-is-no-myths-of-color-contrast-accessibility#respond Mon, 02 Dec 2019 23:56:44 +0000 https://www.creativejuiz.fr/blog?p=6911 The post There is no "Myths of Color Contrast Accessibility" first appeared on Creative Juiz.

When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor contrast ratio. Accessibility […]

The post There is no "Myths of Color Contrast Accessibility" first appeared on Creative Juiz.

]]>
The post There is no "Myths of Color Contrast Accessibility" first appeared on Creative Juiz.

When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor contrast ratio. Accessibility comes with its constraint, but not much more than UX (User Experience) Design.

Definitions

I would like to start with my definitions of Accessibility and User Experience. I know the definition of both is quite complex and not always shared by the experts, so sorry not sorry, I’ll give it a try.

User Experience

The User Experience is the feeling, the attempts, the hope, the actions, the failure and success, the frustration, the memory, etc. a person has with a product or a service. Depending on the goal you want to reach, this experience can be bad or good. Even with the idea of reaching a bad experience, it could totally be on purpose by the designer of this experience. Oftentime as a designer you tend to provide a memorable experience in a good way to make your users understand, use and love the product/interface. Making interfaces usable comes with the need to understand a specific group of people so that you can help them achieve a precise task with efficiency, effectiveness and satisfaction.

Accessibility

In our domain, Accessibility is the practice of making websites or application usable by as many people as possible. We often think it’s applicable to only people with disabilities, which is by definition the case, but it definitely benefits other groups of people in some specific cases or context.

Where user experience tend to satisfy a precise group of people, accessibility tends to include as many people as possible in a common good experience, but both are not mutually exclusive.

The Myths of Color Contrast Accessibility

This blog post is an answer to this eponymous article.

I would like to thank Anthony for pointing out some of the things that seem to be myths around the designer community. I personally discovered some of them by reading the article.
The issue is perhaps not so much what Anthony says but the way in which he says it – it makes you think that you shouldn’t trust one of the most known Accessibility Guidelines (WCAG), because it is not what users need.

The article guide readers through several visual examples with one solution that is supposed to be accessible, and one that is supposed to be inaccessible, arguing that the inaccessible solution is preferred by people with disabilities. That leads you to a false risky conclusion: could the inaccessible solution be a better (the best?) solution?

I want to work and guide you on a better path: analyze the issue and find a better solution for each example demonstrated by Anthony. This guide should help you better understand some principles around color, available solutions, and tips to really test your hypothesis.

Myth 1: The WCAG requirements are always optimal

Indeed they are not. As the name said, WCAG are only guidelines to help designer and developers build better interfaces. When you start building your design with colors, both people’s tastes and user needs will bother your sense of beauty and your feelings about what is delightful or not.

Anyway, designing is neither about your preferences nor about your taste. It’s about usability and matching the user needs. Most of the time, color is not essential in terms of usability. Start with fifty shades of gray compositions.

Some people I know are going way further than me: they design with black and white. (wink wink Inclusive-Components.design by Heydon)

The colors tested

But let’s back to our colored stuffs.
When you need to design accessible interfaces with colors, 2 things are not important:

  • your ego, even if we will need a bit of your taste and expertise to compose the interface and find harmony,
  • the brand color definition: if those are not accessible, change them. I don’t mean you should change the original brand color, but pick one close but more contrasted for your interface. Here we could use your taste to pick the good one 😀
    I know that’s not always possible though. Another Idea could be alternative stylesheet, but to me it’s the last solution to keep both users and branding folks happy.

Let’s take the same example as Anthony.

Two buttons next to each other, one with white text on blue background, one with dark text on the same blue

I used white and dark background on this illustration because Anthony had the idea of making a poll using the dark image, but then argumenting on color contrast on his blog post with a white background.
Just for you to know: context changes the way you feel and read colored things. But that’s another topic (I take a quick shot at it later in this blog post). For the rest of the blog post, I’ll study those buttons with a light background. I won’t play with all the background colors, I’m pretty sure you get the idea with one example.

Here’s the data about the contrasts. Tests are made with a font size of 16px and a font weight of medium, because both of those text styles matter in the analysis:

  • white on blue
    White: #FFF, Blue: #57ACF9
    Font-size: 16px – Font-Weight: medium.
    Contrast ratio: 2.5:1 (minimum 4.5:1)
  • dark on blue
    Dark: #2D2D2D, Blue: #57ACF9
    Contrast ratio: 5.6:1 – (expected 4.5:1)

Looking to the “source” of a survey, the white text is preferred by the people who answered.

Well! I’ve got an issue with that. Considering the simple fact that almost 5% of the worldwide people are colorblind (consider a way bigger number if you include other visual impairment), and that 29% of the people who answered the poll prefer the accessible version… I don’t want to transpose or compare the numbers, but potentially the people who answered are colorblind, and even if they are not, some of them prefer the accessible version… a lot of them.

Another thing is that you can’t find the right solution by asking “do you prefer A or B”. You should ask: “How many people easily read A?” then on another separate question “How many people easily read B?”. And ideally, instead of a binary “easily read” question, you should probably even use a rating scale.

In Anthony’s case,  I would say both of the solutions are not ok here, but why?

Maybe because the WCAG are using Maths for calculating things that are all about perception, and it’s a real issue. It has even been recorded as an issue on the WCAG Repository.

To go further, Anthony totally forgot the Brightness and Color differences, which is very important in color “contrast” analysis. It covers another aspect of color perception, also known as Irlen Syndrome: this syndrome is about high contrast sensitivity. I’d say that WCAG is talking about “color contrast”, but it’s not really about contrast and more about luminance difference between 2 colors. Anyway.

Brightness is not related to the contrast, it’s related to the perception of light. That’s why analyzing contrast where brightness act is kind of a non-sense.

Let’s go back to our set of colors.

  • white on blue
    Brightness difference: 107 (minimum 125)
    Color difference: 277 (minimum 500)
  • dark on blue
    Brightness difference: 103 (minimum 125)
    Color difference: 353 (minimum 500)

Both have a lack of differences. That’s why dark on blue is still not enough to create a real difference when you ask people. They will be more likely to answer with taste preferences.

So yes, WCAG uses the wrong measure, but the proposed solutions are not correct at all. Let’s find out together how to improve a little bit the readability of our buttons.

How to fix color contrast?

If the preferred color seems to be white on blue, you would rather keep the white as text color and change for a better blue background to improve your contrast and color differentiation.

I love to play with Color.review, a useful tool that gives you indicators to help you pick the right accessible set of colors, with a projection of the rendering.

Color Review Contrast Tool

By playing a little bit with the blue, I finally find something respecting the AA requirements (intermediate level of accessibility requirements), and way better color and brightness differences.

The new button in between the 2 first proposals

With this new blue background, we get some new data that are way close to the expected WCAG requirements:

  • NOT accessible white on blue
    White: #FFF, Blue: #57ACF9
    Contrast ratio: 2.5:1 (minimum 4.5:1)
    Brightness difference: 107 (minimum 125)
    Color difference: 277 (minimum 500)
  • Accessible white on blue
    White: #FFF, Blue: #0B77D8
    Contrast ratio: 4.5:1 (minimum 4.5:1)
    Brightness difference: 158 (minimum 125)
    Color difference: 419 (minimum 500)

And to confirm this is a real solution and not a matter of taste, I asked on a questionnaire about people’s preferences on readability, and I also asked I also asked the respondents if they were colorblind. See the next section for more detail on the numbers.

Comparative metrics

No surprise here: when you ask separately what is the more readable, people will be more likely to give you the “readability” answer and not only their taste in term of color. Anyway, here is some extracted data.

For each visual proposition of a button, I asked the same question: “Can you easily read the text on this button?”. For each, the same answer where available as a rating between 1 and 5, where 1 is “Not easily [readable]“, and 5 is “Yes I read it easily”

On the next graphs, you will see numbers between 1 and 5 on the horizontal axis, those are the rating of the visual proposition. On the vertical axis you will find the number of responses.

Proposal 1: Button with white text and blue light background

Results for the 1st button (detailed just after)

People are pretty at ease with this contrast, even if a lot are still rating less than 4/5 this visual.

Proposal 2: Button with dark text and blue light background

Results for the 2nd button (detailed just after)

A big amount of mixed feelings here. This solution is not good at all if we want to reach our goal.

Proposal 3: Button with white text and blue accessible background

Results for the 3rd button (detailed just after)

There is almost no debate on this solution. I think we did good.

Proposal 4: Button with white shadowed text and blue light background

Results for the 4th button (detailed just after)

This last test wanted to solve the contrast problem by using a drop shadow under the text while keeping the set of non-accessible colors. This did not have the desired effect.

Arbitrarily, I’ll take for “readable enough” the percentage of people included in the upper range (4 and 5 points) to be able to compare our solutions.

  • The more readable button
    1. Proposal 3 – Proposed more contrasted button.
      Rating: 89.5%
    2. Proposal 1 – Anthony’s inaccessible light blue with white text.
      Rating: 68.8%
    3. Proposal 4 – The text shadowed version.
      Rating: 56,6%
    4. Proposal 2 – Anthony’s accessible version with dark text.
      Rating: 46,5%
  • Colorblind Preferences
    1. Proposal 3 – The proposition I made in term for contrast with the white text.
      Rating: 45 – 90%
    2. Proposal 1 – Anthony’s inaccessible light blue with white text.
      Rating: 40 – 80%
    3. Proposal 4 – The text shadowed version.
      Rating: 35 – 50%
    4. Proposal 2 – Anthony’s accessible version with dark text.
      Rating: 35 – 50%

The result is all about accessibility here: we succeed at proposing a solution which makes the button readable by 89.5% of the population if we keep only the 4 and 5 ratings, and 90% of the people with colorblindness. (the ratings would probably have been closer with more voters.)

Statistics for colorblind people (91.1% not colorblind, 5.1% are colorblind, 3.4% don't know, 0.4% don't tell)

N.B: it’s probably a percentage of the population that do not use a screen-reader to read the content. Keep in mind that there are many different degrees of visual impairment, my survey did not ask for more information to focus on color.

While you’ll likely never find a solution that works for 100%, your job as a designer is to include as many people as you can – and if you’re not sure, give them control over your interface.

Going Further with Color Contrast

When people think about color accessibility, they usually come with the idea that their design will end up ugly. I don’t really know where does this idea come from, but I’m really curious about that.

As a designer, you already know that design is always about working within some kinds of constraints

  • a more or less precise budget
  • a certain type of material
  • a limited space (smartphone, tablette, small areas if you are into home staging for example)
  • etc.

Accessibility should only by another constraint, and like the others, should be seen as a focus for creativity and not a blocker.

Daryl Koopersmith and Wilson Miner wrote a pretty good blog post on Designing Accessible Color Systems. It’s a good example of how you can work on your color system to make it accessible and build efficient components with it.

PS. I heard some stuff about Stripe not being accessible for Screen Readers. That’s another topic, baby steps are better than nothing.

About context: Dark interface VS Light interface

I told you earlier that the buttons tested were on white background but I have shown you 2 different backgrounds on purpose.

The context can demonstrate the perceptive aspect of the color and its interpretation by your eyes and you brain. Color perception is a complex thing referencing under the abbreviation of HVS (Human Visual System model).

Two buttons next to each other, one with white text on blue background, one with dark text on the same blue

To quickly explain my point here, when you have a light interface, a blue button and a white text, your eye doesn’t really need to adjust. At the opposite, working with dark text on the button will ask your eye to adjust a little bit more and will be perceived harder to read. Supposedly.
It’s a bit like when you’re in a bright room and you pass by a dark room, it takes a while for your eyes to adjust to the lack of light to start drawing the contours of objects.
As I said the perception and the brain are complex things.

Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible

Despite the fact that I never heard of that myth before, the minimum required for most of the European Administration website is AA.

[…] in the EU Member States are obliged by law to ensure that the information they publish is subject to accessibility standards, in particular the Web Content Accessibility Guidelines (WCAG) AA standards.
Source

Patrick H. Lauke, himself described as WCAG trash panda, Web Standards and Accessibility expert, explained it to me in overly simplified terms:

“The core point of A/AA/AAA is that they are separate levels of compliance. and they cover things based on population affected and how critical a failure of a criterion is. A affects a lot of people and will be a very detrimental/critical problem. AAA will affect a relatively smaller percentage of the population, is is likely less of a show-stopper and more of a surmountable but annoying issue that will disproportionally affects that particular user population. Also, AAA are generally criteria that require more fundamental changes (in design/layout/etc) to address. So the myth is right only in that “you need to meet AAA requirements if you want to claim AAA compliance and be accessible to the widest audience”. AA is generally accepted as the baseline. AAA goes above and beyond, to help people with more severe visual conditions.”

Again, the goal with the minimum is to encourage people doing some effort for people in needs with better readability. If WCAG has 3 levels of requirements it’s to encourage you to go further and learn the benefits of being accessible. If you cover all the simple A requirements, it’s already a good job. Next step AA 😊

If you are told that AAA requirements is only for aged people (because they are “mostly” the only ones with a vision loss of 20/80) and people who don’t use screen-reader, just to give you an excuse not to meet those requirements, then you are not making things inclusive.

Furthermore my source seems to say that the number of people with impaired vision is about several million in the US. In 2017, 3 894 406 persons with visual impairment less than 20/40, 1 483 703 persons with less than 20/60, and 1 082 790 with 20/200 or less. And those impairments take into account people above 45 years old.

There are 2 good reasons for making things match the AA or AAA requirements:

  • Your user research told you so.
  • You want to be accessible and inclusive by default.

Use global studies to give you a tendency,  but don’t get stuck at it: do your own research for your population/users.

Myth 3: Gray text and buttons are inaccessible and look disabled.

Depends.

In our recent user tests I conducted at Foyer, the first Insurance Company in Luxembourg, we had 100% of our testers ending up with the same behavior: thinking that gray buttons were disabled despite the effective contrast.
Sadly I can’t provide you the recordings or statistics here, but I can certainly give you the same advice: affordance comes with a lot of contextual parameters.

Oftentimes, gray buttons are used for secondary action or cancelling actions, action that are willfully less eye-catching to help user focus on what we expected them to do.

To do so, you can use another set of stylistic combination:

Propositions for secondary actions with less eye-catching contrast but still accessible

Your boundaries (border for example) don’t have to match a good contrast ratio since the text does.

If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast.
WCAG 1.4.3 – Contrast (Minimum)

Again, do your own research and don’t forget that you will make mistakes, and that’s totally fine! Learn from those mistakes.

Myth 4: Using a color cue alone isn’t sufficient in conveying information

This isn’t a myth, this is accessibility basics, and at some points it’s even a usability basic knowledge. This section take Use of Colors as reference, but also logical and cognitive disabilities into account.

You can’t take the topic of colors separately among the other various topics of accessibility and usability. Accessibility of your colors is only a small part of the field and have to be combined with other types of topics like cognitive impairment, mobility impairment or auditory impairment.

The accessibility requirement states that:

“color should not be used as the only visual means to convey information, indicate an action, or distinguish an element.”

However, this standard only applies to cases where different colors assign specific meanings to inform the user. In other words, if you’re using color differences to convey information you need an extra cue. This is made for visual impairment but also for cognitive impairment.

Anthony says “But if you’re using lightness and darkness to convey information, you don’t need an extra cue as long as the contrast difference is high enough.”. What does that mean?
I tried to rework the phrasing but I can’t get it right: using color differentiation to bring meanings is not enough, period. You can use lightness and darkness if you want, it’s still playing with things with no meaning at all.

So yes, technically Anthony’s right, in the strict reading of WCAG. But technically is not enough: it still results in potential confusion for users.

2 toggle tokens with 1 blue and 1 gray

Keeping the toggle tokens example, the issue is that if you don’t have enough items you don’t know what the initial state of the tokens is – whether they are activated or not. Same if by default all the items are gray, you don’t know what is checked and what isn’t.

3 toggle tokens with 2 blue and 1 gray

With one more item your brain can guide you by defining a pattern. Similar-looking items have the same state and you can start guessing the state for each item. But howabout we stop guessing and start using visual cues people are used to, and that are actually made for saying “this one is selected”. Another part of accessibility gathers cognitive disabilities, and make people guess what you want to say end up badly sometimes, it’s even more true with people with cognitive disabilities.

Toggle Tokens with checked icons

And voilà ! I mean, what does it cost?

Color is for decoration, ambiance, theming. It should support your message, not be the only way to convey it. Colors don’t have real meaning despite the numerous purely cultural interpretations you can easily find on the web. Of course you will use red color for errors, but the real meaning is the words you put on your messages, and the visual indicator next to them. (icons, images, for examples)

But even there, the icons are easily interpretable, but that’s another accessibility/usability topic.

Color (Contrast) Takeaways

I know I gave you a lot of information, sometimes in contradiction to what other experts can shout loud and clear. Here are some takeaways:

  • Always do your own tests with your users.
  • Don’t let your ego kill users feedback.
  • WCAG are not always 100% correct, they are working on improving their admittedly basic contrast calculation methods.
  • If you think about accessibility, you already do more than a lot of designers, now try to practice and stay open for feedback.
  • If you feel lost, ask experts, there is a community to help you.
  • There is always something more to do better, know when to stop.

I’m available: comments and Twitter are here for that 🙂
A thanks to Patrick H. Lauke for his kind advice.

Resources and External links

I learned from these, as well as other resources provided in the blog post.

The post There is no "Myths of Color Contrast Accessibility" first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/user-experience/there-is-no-myths-of-color-contrast-accessibility/feed 0
UX/UI Designer Tools https://www.creativejuiz.fr/blog/en/resources-tools/ux-ui-designer-tools https://www.creativejuiz.fr/blog/en/resources-tools/ux-ui-designer-tools#respond Sat, 12 Jan 2019 17:29:09 +0000 https://www.creativejuiz.fr/blog?p=6653 The post UX/UI Designer Tools first appeared on Creative Juiz.

For more than one year now, UX and UI have occupied a major part of my daily work-life. My background as front-end developer has been used almost exclusively to communicate my recommendations for micro-interaction, and to increase the skills of some of the teams. A little retrospective with this list of tools that I’ve used […]

The post UX/UI Designer Tools first appeared on Creative Juiz.

]]>
The post UX/UI Designer Tools first appeared on Creative Juiz.

For more than one year now, UX and UI have occupied a major part of my daily work-life. My background as front-end developer has been used almost exclusively to communicate my recommendations for micro-interaction, and to increase the skills of some of the teams. A little retrospective with this list of tools that I’ve used for some of those or that I discovered during my research for the others.

The purpose is not to detail the interface and the use I make of each tool, but rather to present them to you quickly so that you can get an idea of each service. Each tool can be used differently from the way I use it personally. The comment area is at your disposal if you have any questions about any tool.

Concept and research

In the research phase, you need more than ever to put ideas together and get several people from different fields to collaborate. Sometimes when you work remotely with users or teammates, those tools are very usefull. Online collaborative tools are perfect solutions to make your life easier.

Wireflow

Wireflow

Wireflow is a free open source collaborative wireframing/prototyping tool. It includes a set of features that allow different profiles to collaborate on a flow.

  • Real-time collaboration,
  • Management of user permissions,
  • A Live Chat for quick chat,
  • A library of rich graphic elements. (10 categories, 113 graphic elements)
  • Open Source to allow you to install it at home or improve its code.

I never had the opportunity to use it but the tool was in my list of tools to be tested one day. I’ll let you play with it.

Explore Wireflow

Realtimeboard

Realtimeboard

Realtimeboard is a paid collaborative tool. A free version allows you to test the tool far enough. Overall, you can do whatever you want with this tool. In particular it allows you to organize your ideas during the reflection phase in design of a product or when you are developing functionalities. Mind Map, User Story Map, Kanban, Flowchart, etc.

I use it regularly: this tool is really useful to expose a reflection to a decision-maker, to make people collaborate remotely on an ongoing reflection, or to create a moodboard to collaborate with a designer/DA.

Explore Realtimeboard

Milanote

Milanote looks a bit like the Realtimeboard tool: it’s a white canvas on which you will be able to aggregate several types of content in order to create a moodboard, write notes or todo-lists. Really useful to collaboratively organize the first ideas around a solution, or to bring out concepts.

For having used it, simple drag-and-drop and a few clicks allow you to compose collaborative moodboards that are useful to design efficiently.

Explore Milanote

Decision Phase

Once your research phases have led to something suitable to start structuring potential solutions, it is time to project yourself on a more precise path.

Uxpressia

Uxpressia

Uxpressia allows you to create personas, User Journey Maps and Impact Maps online on pre-designed templates allowing you enough freedom to customize all presentations. View, export and collaborate online directly on the tool.

I didn’t have the opportunity to test it in a team but the few basic features allow me to compose personas and User Journey Maps very quickly.

Explore Uxpressia

Smaply

A bit like Uxpressia, Smaply allows you to draw the path of your existing or future users according to your data or your search results. Create personas and Customer Journey Maps and Stakeholder Maps to maximize your understanding of users and their expectations throughout the team.

This is a paid service that I have not had the opportunity to test. But you have 14 days of testing, don’t hesitate to give me your feedback on the comments if you ever test it.

Explore Smaply

Testing Phase

Once the creation phase is completed, you’ll want to test your theories and hypotheses fairly quickly through user tests. Here are some tools that can help you do this.

Lookback

Lookback is a remote or face-to-face user-testing tool. It allows you to simultaneously film the screen, the user’s interactions and their face to cross-reference their actions with their facial expressions. The sound also recorded to allow you to replay the test recordings, return to specific points of the video and annotate them for later review.

Very practical even during face-to-face tests. Works on mobile in mobile screencasting of the mobile or by recording via Quicktime a connected phone for example, for having already used it in both situations. The interface is really good, I strongly recommend this tool.

Explore Lookback

Evalyzer

Evalyzer

Evalyzer joins Lookback on the idea of offering a way to register your user tests online and review those later. In addition to this you will have the possibility to prepare your protocols directly in the tool and share a unique test link on different social media. I doubt the value of this kind of feature, but there are certainly use cases that I haven’t yet had the opportunity to explore.

A more or less automated statistical system then allows you to generate a test report that is detailed enough to help you make decisions. I didn’t have the opportunity to test the tool because it’s not easy to access (you have to contact the support to access it), but it came out during my tool search. I personally use Lookback.

Explore Evalyzer

Appear.in

Appear.in

Appear.in is a chat tool between people like Skype but using a P2P HTML5 API to share video and its screen. To simplify, this is a native version of screensharing and video sharing directly in your browser. In our case, it allows you to interview your users, or even share the screen during a test.

There is a desktop version but it is also available as native applications under android and iOS systems. The lightweight and free aspect of the tool (for 1 room and up to 4 simultaneous users) makes the solution quite interesting for other things than user tests 🙂

Explore Appear.in

Production Phase & Quality

Once all your product is thought through, and even often during this reflection and after laying the first bricks and testing your ideas, you need to document and gather knowledge. It must also be kept up to date to facilitate the onboarding of new people in your teams.

Marvel App

MarvelApp

Marvel App allows you to publish views (screens, visuals) of an application or website and to simulate navigation on this site using links created via Sketch (native prototype feature) or directly on the Marvel Application. Native Android and iOS applications allow you to load the views of the prototype directly on your smartphone.

The code inspection tool (Handoff) allows you to transmit style information to developers (CSS) while navigating through views.

A design function allows you to design simple prototypes live, but I never had the opportunity to use it.

Finally, a “Userflows” view allows you to globally visualize the mapping from one screen to another to have an overview of your process or screens.

Explore MarvelApp

Invision App

Invision App

Invision allows you to view online a set of views that you can sequence as you wish from Sketch (through the Craft plugin) or directly from Invision. For some time now you can also create a whole design system and inspect the visual elements to extract pieces of style code. (CSS)

Invision also offers a “Freehand” mode that allows you to collaborate on a whiteboard to draw and exchange ideas. I personally exchanged Invision for Marvel App because of Marvel’s native support for Sketch prototypes.

Explore Invision

Axure

Axure

Axure is a very advanced prototyping tool, a little old but still in the ecosystem and whose new version will certainly bring a little freshness: Sketch compatibility, reworked interface, among other new features.

Axure allows you to compose dynamic views and emulate the behavior of a real website to test the features and their choreography before developing those. This allows you to have a short production and testing cycle.

Apart from Axure, I would have told you about Atomic.io but the tool is no longer available for the moment. So watch out.

Explore Axure

Nuclino

Nuclino

Nuclino is a tool to facilitate communication within a team by gathering knowledge in a single point. This “knowledge base” allows you to centralize documentation and things to know when it comes to methods or processes in the box, or the management of a customer, the tone to use, etc.

  • Works visually: create groups of your knowledge,
  • Works on all devices,
  • Simple Import/export system,
  • Collaborative tool,
  • Powerful research.

Explore Nuclino

Sketch

Sketch App

I don’t even know if it’s still worth introducing it. Sketch is a rather advanced prototype creation tool, wireframe and graphical interface design. It allows you to compose your elements, pages and views following the principle of Atomic Design, thanks in particular to the symbols: reusable, nested, flexible components whose occurrences can be customized on a case-by-case basis.

Layer and text styles also allow to have a kind of style logic close to CSS, but without the inheritance (unfortunately).

The prototype and mirror system allows you to simulate the use of the interface directly on your mobile devices. Sketch Cloud also allows you to enjoy mirroring from a distance. A big advantage if you use Marvel App: the Prototype system is natively compatible.

Explore Sketch

Principle

Principle

Principle is a tool for Mac that allows you to simulate interactions and animations to help you project yourself into one way or another. The mirroring system allows you to pass your animated prototype directly to your smartphone or tablet.

The tool allows you to validate an idea as well as to transmit the expected interaction and animation to a developer. Indeed, you can easily adjust each animation with easing effects and a delay to the nearest millisecond.
One of Principle’s strong points is that he can create mini interactions, such as components, that you can reuse in several places in a larger component. Kind of like the Sketch symbol principle.

Explore Principle

Flinto

Flinto

Flinto, another Mac-only tool, has exactly the same goal as Principle but goes much further in supporting movement, interaction and state change management. However, it is a little slower to learn to handle.
If you come from Principle, you will have to break some habits. Both have their own functioning and particularities, Principle can very well be enough for you for small simple animations, Flinto will serve you for much more complex interactions.

Explore Flinto

Analysis & Continuous Improvement

It’s nice to put it into production, but it’s even better to see how your users use the interface you make available to them. To do so, you have to analyze the changes you are constantly making.

Hotjar

Hotjar

Hotjar is a pretty powerful tool that allows you to do several things:

  • Record visual tracking sessions of your users (video), very useful to understand what your users are doing on the interface and where they are giving up,
  • Generate heatmaps to understand more global behaviors,
  • Analyze funnels and behaviors on your forms to understand what is wrong.

These tools will allow you to understand the behaviour of your users on different devices (responsive support) with qualitative data.

Explore Hotjar

Resources to build skills

In the list of tools that have been useful to me are those that have allowed me to develop my skills on my own.

  • UX Tools – Provides you with a list of common tools to work with on a daily basis in UX/UI with a comparison of features and prices for each. Really convenient to select your next tools according to your own criteria.
  • 18F Methods – Provides you with a list of methods that can be used for each step of your research and analysis. Really convenient to help you use the right one at the right time with implementation assistance.
  • User Research Service Manual – A “user manual” of the user search. A detailed manual starting from explaining the interest of user research to how to implement it and ending with the analysis and sharing of results.
  • Laws of UX – A few ergonomic laws that allow you to better understand how the human brain works, but also to have scientific arguments to justify your decisions. I like to remind stakeholders that I don’t just color prototypes and that design is also science.

Go further in UX Tools and method with this selection of Stéphanie Walter.

So, I won’t share my methods with you yet because they are far from being sufficiently practiced, but maybe soon a part of the workflow we have in my current team.

Feel free to share your tools too 🙂

The post UX/UI Designer Tools first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/en/resources-tools/ux-ui-designer-tools/feed 0