UX and UI designer Stéphanie Walter, who will talk about the perception of speed at Pixel Pioneers Bristol, chats about why perceived performance matters, too, how designers and developers can collaborate better and more
What is perceived performance, and why does it matter?
The concept of “perceived performance” refers to how fast users think an interface is loading or reacting to their actions. It’s hard to measure since it’s all about perception. External factors like how fast users can interact with the content, users’ profile, state of mind and situation can affect speed perception. If you already invested 10 minutes picking up your champion, gear, team and know that you will play for 45 minutes, you will be willing to wait two minutes for your League of Legends game to load. But you might not want to wait more than three seconds for an unknown site to load when you arrived from a search engine. It’s all about perception. You can optimise all the pixels and bytes of code you want, there’s always a limit to what you can optimise. This is when perceived performance is going to play a big role.
Even if your site is fast to load, it will still be perceived as slow if the experience is painful. But if users can interact early with the content and complete their task quickly, your product can be perceived as fast. Even if it's slower to load. In the end, perceived performance plays a big role in user’s satisfaction.
What can people expect to take away from your talk at Pixel Pioneers Bristol?
There are a lot of articles presenting the basics of perceived performance. Most of them use the examples of big companies like Pinterest and Instagram. I really like those products, too. They provide great inspiration when it comes to perceived performance. But let’s face it: not all of us have such resources and budget. I will show people speed perception improvement techniques like micro-interactions I built for a project, skeleton screens, visual feedbacks, and other easy to implement solutions. I want to help them understand what kind of progress loading indicator they should use depending on the situation. I will explain how I deconstructed waiting time on a project to build a video streaming experience and how I communicate speed perception to the developers. I will use examples from real projects I worked on to show that we don’t need to have a big budget to build great fast products.
How can designers and developers collaborate better to create user experiences that are both fast and rich?
The key for good collaboration is communication. It also makes things easier when designers understand how code works and developers get interested in design. I don’t have any idea how to code in Swift (iOS) or Java (Android). But my developers are kind enough to explain to me how the code they produce works, so that I can understand what we can and can’t do.
Usually, I start working on paper. I build a paper story board of what I have in mind. I then go to my developers and speak with them to make sure it can be done in the app or the website. Once the global concept has been approved, I start working on the details.
I use styleguides to communicate simple micro-interactions like hover and active states. I also code HTML/CSS prototypes to help the developers understand what I expect from simple interactions. When the interactions get complex, I use tools like Flinto or even Photoshop GIFs (don’t judge me) to build and show them videos of interactive elements, transitions, etc.
After that, they code the idea. They show me the app or the site. I can play with it, give them feedback and we adjust it together.
In the end, it’s a mix between a lot of tools and techniques. The important point of this whole process is to check up with the development teams on a regular basis to make sure we are still on the same page and build a high-quality product.
What’s your favourite mobile trick or hack right now?
It’s not really a hack, but I’m a big fan of Progressive Web Apps and the whole “let’s make that content available offline”. I like the idea of building a responsive web app that will be available on many different devices and browsers without the need to download it from a store/market. With PWAs, users can add your site on their mobile home screen and launch it almost like a native app. More and more features that used to be only available for native apps are now available in the mobile browsers: offline, push notifications, geolocation, etc.
I wrote a part of an article on the topic if you are interested.
You’ve recently written a post for the Pastry Box Project about the encoding issues around the accent in ‘Stéphanie’. How do you build forms that can deal with special characters?
Since I wrote the article, a lot of people have sent me even more horror stories about special characters: conference badges poorly encoded, almost not being able to get married, two hours at the border control and a flight almost missed, etc. All of this happened because somebody somewhere decided that special characters in their names was not allowed in a form.
At a conference, Luke Wroblewski said: “A form is the name, value, pairs, in a structure for storing data on a computer barfed out as labels and input fields to a human being”. Like him, I believe that most form usability issues come from this tendency to serve the structure of the database to the users.
If we want to build forms that can deal with special characters, we must first check our restrictions and ask ourselves: why do we forbid those characters in the field? Is it because of our database? Can we maybe fix the database to allow them? We must think about the big picture, understand that as soon users can enter information in our site, this information will be diverse, especially when it comes to names. We live in a globalised world and need to understand this when designing and coding forms. It’s called reality check. We need to start building forms with users in mind. And this requires empathy and testing.
You share a lot of resources on Twitter and other social networks. What are your favourite tools right now and why?
It’s not really a tool but some clever people launched an online, sorry, offline-only magazine that forces users to switch off Wi-Fi to read it: The Disconnect.
I really like the idea because it uses the offline capabilities of our browsers and Service Workers in a really creative way. This initiative is also a nice way to remind us that we might be spending a little bit too much time online. Maybe we need to disconnect more often.
I’m also more and more excited about Sketch and all the plugins that people create. They bring a lot of possibilities (but also a little bit of noise sometimes) to the main tool. For instance, I’ve always wanted to learn how to create small videos of interactions but frankly After Effects scares me. I was super happy to discover tools like Flinto or Principle, but also all the new plugins that let you build quick animations directly into Sketch. I like the fact the community behind Sketch brings evolutions to the tool based on designer and developer needs.
Another tool I currently really like is noisli.com. Combined with my noise-cancelling headphones (this is a tool I can’t live without, worth every penny, by the way), it helps me concentrate in a sometimes really noisy, open space. My favourite sound is the sound of thunder and the wind and some music.
You’re also working on a tool for speakers, aren’t you? Can you tell us a little bit about it?
Of course. As a side project, I’m currently working on a WordPress plugin to help speaker share their conference and workshop slides and videos on their websites. I designed the icons and the front-end templates. Geoffrey Crofte is taking care of the plugin code. We both work together on the user experience. We're currently in alpha mode and still doing some user research to better understand potential users and testing the plugin on a friend’s portfolio. We support embedding from YouTube, Vimeo, Dailymotion, Speaker Deck, SlideShare and Slides.com. We want to make it simple for people to share their talks, so we concentrated on just a few options for now. We expect to be launching a beta version by June or July.
How did you get into the industry, and to where you are now?
I was always interested in design and computers. I started with Windows 3.1 and the MS DOS dark screen when I was a little girl. I was a creative child and also interested in drawing. I understood the power of photo editing tools and spent quite some time in Paint Shop Pro 7, building my own world. Soon after that, all my friends got a Skyblog and so did I. This was the French equivalent of a MySpace page. It was fun, but you could not change a lot of things in the design. We had some nice “text gradient generators” that added a span around each letter to generate a rainbow text. Good old times, people, good old times.
Anyway, I got frustrated with the lack of customisation in Skyblog, so I switched to another platform and discovered CSS. I didn't know how it worked. Like many of us, I was mostly copying and pasting pieces of code I found on forums to put my sidebar on the left and on the right. I took Photoshop classes during my Bachelor Degree and started playing around on my own in the wild field of web design. I also switched my blog to WordPress for more flexibility. This is when I properly learned HTML and CSS (and little bit of PHP) like many people I know: online tutorials and looking at the code.
I graduated from my Master Degree in the field of foreign languages and web design and found an internship in Germany as a graphic and product designer. I discovered native mobile applications, UI and product design. At that time Android was starting to get interesting, so it was mostly iOS and Blackberry B to B applications. The master degree didn't provide design lessons. So here I was again: learning by myself using books and articles from this amazing community I was starting to fall in love with. I worked in Germany for a few years. I came back to work in France for a small web agency for a while. Then I moved to Luxembourg to work for the university and for a tech company as a UX designer.
I’m mostly a self-made woman and autodidactic when it comes to design and code. Everything I know, I learned online through articles, at conferences and by discussing it with people. This is also why I decided to give conference talks and write so many articles. I learned so much from the community. I want to be able to give back and help people get better at what they do.
What’s the best piece of advice you’ve ever received?
It would be something like “fake it until you make it” and I would add “because you know more that you might think”. It’s especially true when you are a woman in the tech industry with a huge imposter syndrome. Faking it will help you get the job you want and eventually you will learn, become the real deal and won’t need to fake it anymore. In French, we say “c’est en forgeant qu’on devient forgeron”. You could translate that into something like “Practice makes you perfect“. You just have to remember that everybody was faking it at some point. And you will always have something to contribute, a personal story to share, even if you're just a beginner. So, don’t be afraid to tell your story. It might interest more people than you could possibly imagine.
Also bring an extra pair of socks. You never know. That’s a free advice from my mum.
Apart from Stéphanie's talk, Pixel Pioneers Bristol features seven other great talks from the likes of Heydon Pickering, Sarah Richards, and Simon Collison. There will also be two workshops on 7 June: psychology for UX and product design with Joe Leech, and easy and affordable user testing with Ida Aalen. Reserve your space today!