Accesibilidad por contraste y legibilidad

Brand designer, visual concept designer, diseñadores de estrategia de comunicación, diseñadores de service design,… eso es para ustedes.

La elección de una paleta de colores para nuestros productos digitales es una de las cosas que en lo particular me emociona más que otra cosa: con 3 colores y sus variantes un diseño toma vida, una identidad se materializa: la mágia opera.

Ok, pero luego de estar satisfecho de nuestra elección, la realidad nos enfretan a problemas de lectura por falta de contraste entre el color aplicado a la fuente y el color del fondo en el cual se encuentra. Un efecto de vibración.

Una herramienta de Material Design, el Color Tool,  no ayuda al momento de comprobar la accesibilidad de nuestra selección de colores cuando esas se superpone, y actuar en consecuencia: cambiarla o tomarlo en cuenta para definir las reglas de nuestro sistema de diseño (carta gráfica para los principiantes).

Muestra de Color Tool de Material Design
La herramienta Color Tool de Material Design para comprobar el nivel de accesibilidad de nuestra paleta de los colores. © Material Design.

Una buena práctica que les ahorrará dolores de cabeza para resolver en parte este problema de legibilidad.

Resolución del problema de vibración causado por la falta de contraste entre dos elementos gracias a la aplicación de opacidad.
© Material Design.

Podemos aplicar los ajustes siguientes para resolver el  problema:

ajustes de opacidad para evitar el efecto de vibración provocado por la falta de contraste
Observamos una mejor legibilidad del texto al cual se aplico una opacidad (izquierda), mientras que el problema de vibración persiste en el texto sin ajuste de opacidad. © Material Design.

Ética en el diseño

Tristan Harris, quien ocupó el puesto de Design Ethicist en Google hasta 2016, antes de integrar la organización, Time Well Spent y finalmente crear el Center for Humane Technology, introduce el concepto del Net Good Time durante una charla TED.

Este concepto trata de hacer que el usuario pase el mínimo de tiempo en buscar una información, con el fin de optimizar su tiempo en disfrutar plenamente su vida.

Siendo diseñadores, no podemos perder de vista que nuestro trabajo es facilitar el uso de una herramienta o de un servicio para el usuario final. La razón por la cual un usuario  pasa tiempo en una aplicación y regrese a utilizarla tiene que ser por su practicidad, no porque se ha vuelto adicto a ella.

La palabra herramienta es muy importante aquí. A ninguno de nosotros nos gusta este sentimiento de haber perdido tiempo procrastinando al consultar sin parar el feed de Instagram, Youtube, Facebook…

Aquí surge otro tema: educar el usuario a consumir de manera adecuada las herramientas digitales. No vale hablar de ética únicamente desde el lado de la concepción, es importante plantearse el concepto desde el lado del consumidor.

Service design by Uxer Madrid

This past wednesday, 12th of september, I assisted for first the time to a Uxer’s conference, the subject being Service design.

Uxer is the frontline competency of Iron Hack, a UX design school with physical adress in Madrid. I would say that they are even more focused in UX than Iron Hack considering that they exclusively offer UX oriented courses.

The conference

The conference was lead by 3 speakers who occupies high level position within important companies:

  • Juan José Elizondo (who also co-organize the Interaction Design Foundation of Madrid ), UX optimazation Manager at Leroy Merlin
  • Andrés Botero, Global Design Lead in BBVA
  • David Murillo, Innovation and Design Director at Telecoming

Each of them presented how service design is included in their work. I will sum up what I consider being major information.

What’s service design ?

With the service design, we are not only concerned with the experience provided to the user when he interacts with the final product, but also by the experience extended by the whole ecosystem which surround that product; from the first time the client will hear about the product, to the first contact he will have with the company, the presentation of the product, the packaging, the look and feel of the shops,  and the post sale customer service. We are talking about a strong coherence between the company strategy and its products, which, when it exists, leads to an logical and 360º immersive experience into the value of the company, its culture and converts the user into an addict and promoter of the product and brand.

A concrete exemple of service design

Lets take the Ikea case. The experience felt in the shops allows the client to project it self into its future, to experiement the product, and even generate new ideas (needs). He is testing and dreaming. He has questions immediately anwsered by the seller, and facilities to take away the furniture.  The snag is that, by delegating the delivery to a third party, Ikea breaks down all the efforts previouly made neither the look of the providers employees will match Ikea branding, neither it language, work ethic, value or profesionalism. Not only the service design isn´t complete but it can also lead to a disastrous experience inevitably associated with Ikeas’ image.

In conclusion

I will quote one of the most reliable UX source to deliver a final definition of the term Service Design:

Service design is the activity of planning and organizing a business’s resources (people, props, and processes) in order to (1) directly improve the employee’s experience, and (2) indirectly, the customer’s experience.

Imagine a restaurant where there are a range employees: hosts, servers, busboys, and chefs. Service design focuses on how the restaurant operates and delivers the food it promises—from sourcing and receiving ingredients, to on-boarding new chefs, to server-chef communication regarding a diner’s allergies. Each moving part plays a role in the food that arrives on the diner’s plate, even though it is not directly part of their experience. Service design can be mapped using a service blueprint.

About the Uxer events

You can find their events in Meetup to stay up to date with the UX design trends and evolution, and connect with the community.

The conference took place in a nice space, The Cube, a co-working space dedicated to host T.I. oriented companies (from big corporations to small startups) . The user experience of this Hub is 90% satisfying: the installations, accessibility (from the metro yes, for disable people not at all), sounds and video are awesome. The -10% goes to the awful chairs made for people to stay 10 minutes sat down on it before being victim of bottom pain and being on the hurry to change position every 5 minutes.

Uxer event card, free drink coupon



Presentation of Framer X Beta at Iron Hack’s Saturday event

Last Saturday, 8th of septembre 2018, I went to an Iron Hack event. Iron Hack is one of the most important community of digital professionals and students here in Madrid, since its main activity is to teach processes and best practice to the future UX-UI, web developers (they mean front end engineer. We really should pay more attention to the vocabulary since, in reality, everybody involved in the developement of a product IS a developer…), and Data analysts.

They also organize paying events, open to the public (you can check their meetup page), during which ones a specific topic is talked about. Last Saturday, prototyping was the highlight of the morning, several speakers shared the processes and major real life problems encountered between programers and designers. That’s always nice to see that we all go though the same shit and listen to the way each other are overcoming those issues.
That being said, what has really captured my attention was the Framer X Beta presentation. Framer X is a new version of Framer which aim is to close the gap between designers and engineers I have just talked about.

I was mesmerized  to see how people was overwhelmed by some small functionalities and so calm before the important, not to say, game-changing ones.
The most visible the functionality was, the most impact it had; designers are still their own best clients I guess,… In fact we could hear claps after a fluid drag and drop funcionality demonstration, while embedded interaction in the components and the possibility of customizing or creating some, let the public cold.

Let me explain those improvements which make Frame X the most efficient UI software so far.

  1. The fluide drag and drop functionality has been integrated as a native interaction available directly in the workspace / main frame panel. It makes it easier to change the layers position as the other elements instantly moves around it in order to avoid overlap o void spaces.

    demo Frame X Beta drag drop funcionality
    The fluid drag and drop frame in action.
  2. The interactive components and the design store, which gives designers’ access to a set of living* components from well-known compagnies like Youtube, Spotify, Unsplash, IOS,… (of course, Framer makes it possible to create a company’s own set of interactive components) are a gigantic step forward to simplify the propotyping and its conversion to a final product.

*But what’s about the living components, as I call them?

Those are components which include code, they are not just a image. The code allows them to be animated or customizable, for instance, a loading component will actually be moving, a switch will show the transition on click, and the youtube video have an open url and the native control panel so that the designer can play the right content, and pause it if he want’s to.
So with we don’t insert in the design some fix images, but a fully interactive component.

Demo of the interactive component. See that when the video components is selected, it is possible to change the image from the right panel (source / path url).

The live prototyping is also pretty awesome because, not only we can create one by linking the layers between each other by clicking the initial element, component or view and the final one (as it’s the case in Sketch), but you can also add an effect on them, something that I was desperate to do until now! For instance applying a bouncing effect to a button by clicking on it.

Those big improvements are due to the introduction of React whitin the component. And to be kind of totally revolutionaly, Frame X Beta, offers the possibility for designers and front end programmers to cutomize their own component. Interactive, and codified components are NOW available, which means more freedom for the UI designer, and short cut in the process of programming.
React is a perfect solution for designers like me who are familiarized with javascript, the code is so much cleaner, it is also great for people willing to be more in control when translating the prototyping to a final product.

One down

What’s easily accessible in Sktech, I mean categorizing symbols (called components in Framer) thank’s to the nomenclature, is only possible in Framer X Beta by customizing the code. I guess they will work on it soon, because that seams to be so basic comparing to the huge new functionalities of the X version.

React code Frame X Beta
En code excerpt from the Framer X Beta demo which shows how to customize the Frame X UI panel. It reminded me of the widget creation process in WordPress, on a lighter scale (here we only edit only file.)


With the Framer X Beta, the gap between design and front end programming is shutting down.