What have we heard about UX trends at the Smashing Conference in New York?

The concept of collaborative #SmashingConf #NYC conference is the first thing that has delighted us – namely, the Smashing Magazine team has opened two Google Docs with a list of all workshops and lectures and has given access rights to all visitors so that they can comment and post direct questions to the lecturers. Please click on http://smashed.by/nyc1 + http://smashed.by/nyc2 (if I’m already bored) and find out all the information from one of the most important UX conferences. Day zero started in the impressive Microsoft Research Center in the center of Manhattan, while the two “real” days of the conference were held at Broadway, in one of the most modern theaters -New World Stages.

I will not describe in detail what was happening day by day because I think that you can also read it from the “docs” above. I’d rather describe the topics that we noticed to obviously prevail among UX colleagues:

1. WPO (Web Performance Optimization)
2. ARIA (Accessible Rich Internet applications)
3. Design systems.

These three “topics” are more important than choosing web technology, CMS, Photoshop vs. Sketch battle or any other smooth auto-masturbative topics. The reason is simple – they are important to the end user, and by focusing on them you will achieve that your application is of high quality and useful to the market.

Why is Web Performance Optimization important?

Every lecture at SmashingConf has at least somehow mentioned web performance and application loading speed, because after all… the web performance business is literal and precise. The optimized web facilitates the expense side: there are fewer maintenance issues and the hosting bill is smaller. On the other hand, we increase the revenue side: higher speed means increased conversions and thus the business success of the application. Faster loading also means greater reach to users with weak cell phones and connections. The two main speakers on this topic were Patrick Hamann (CSS and the First Meaningful Paint) and Harry Roberts (Why Fast Matters), so feel free to find their main conclusions in Google Docs. Here I am mentioning only some of them.

The basics of web performance measurements are the knowledge of the main metrics that we need to in the first place:
Old metrics you no longer have to measure: First byte, document complete, load event, requests/bytes, start render
Modern metrics you should measure: SpeedIndex, First Meaningful Paint, Time to Interact
At the end of the day, performances are an engineering discipline, so it is logical to have the most playing tools related to that topic. This is a classic utility belt of a modern web engineer: Google Lighthouse Chrome Extension, Webpagetest.org, https://github.com/filamentgroup/loadCSS, Dareboost.com, Speedcurve.com, Charles Proxy (throttle to specific connection (2G, 3G, etc)).

About WPO business benefits

An interesting lecture about tools was also held by Umar Hansa on the topic of Chrome Dev tools “A Modern Front-End Workflow with DevTools”. He showed all the shortcuts, tricks, and information about the maximum use of Chrome dev tools for web production. Take a look at all the information in these docs, and all the advice are also on his blog.
I will also reflect on the above-mentioned business benefits so that we do not talk about tools alone. For example, Netflix has saved 43% of the hosting budget by turning on GZIP?! It’s hard to believe, but WPO stats say so. On that page, you can follow the real-life situations of other colleagues from the industry and see general trends, both on the front end and backend optimization. For example, when you ask yourselves how fast your web should be, business people advise that you at least need to be faster than your first competitor (this is measured using the Dareboost.com site). 🙂

At the end of the second day, Jake Archibald stole the show with his interactive quiz lecture where the audience responded to the provocative and backstabbing HTML5 performance questions (yes, it’s possible to discuss our topics Hamlet way as well :)). You can download the full quiz application on his GitHub

ARIA or Accesable Rich Internet Applications

Accessibility had its notable place at the Shift conference Split as well, where the Financial Times Head of development explained the use of the Pally CI tool to analyze the availability of web data. The world really is small because in New York the lecture was held by “her” developer Patrick Hamann from the same team (again using Financial Times as a good example of web accessibility). These are tips from their workshop:

1. Accessibility tests should be performed with real users who have real difficulties and they will give you the best comments
2. Accessibility also applies to difficulties of using the web in unfavorable conditions, for example, when only one hand is available, in places where there is a high level of noise or where you need to quickly “tap” the screen (UX/UI in cars)
3. Pally CI is a great tool for automated website accessibility monitoring
4. Color contrast accessibility checker is one of the first things to check/change on a web application.

Accessibility, as well as WPO, is a topic that pervaded all lectures, and Brad Frost described it best:
”Our job is done with other people, for other people.” Even Nathan Curtis in his lecture on design systems said that accessibility is the first thing we need to think about when designing Call-To-Action. Find out more about Nathan and his lecture in the last section of this travel log…

The rise of design systems in online applications production

Design systems are not a new concept, but their rise in online application production is notable. The existing “common” process of designing static Photoshop templates is slow, non-transparent, and rigid to change, and in 2017 we need a new way of making interactive design. Design systems solve this problem with a different production because instead of creating a predefined Photoshop website design, the designer creates a library of web elements that the developer uses with the designer and client during web application composition. Look at some of the more popular design systems and you will get a better idea of what it is all about:

1. Salesforce design system
2. Google material design
3. Comet.

These design systems allow designers to reuse styles, components, and patterns, giving them time to focus on more important user problems. A good design system also enables engineers to reliably implement new functions without being (too) dependent on designers or clients. Brad Frost and Nathan Curtis described some of the objective benefits:

1. Consistency and cohesion: More conversions and $$$
2. Faster production: More functions and more iterations in a shorter time
3. Shared vocabulary: Fewer meetings, more production and collaboration
4. Simplified testing: Predefined responsiveness and UI appearance
5. Documentation: The design system is actually a central document available to everyone
6. Future-friendly bases: The design system will evolve over time, and that’s its point
7. Tokens: Design systems support the use of tokens i.e. variables by which we define important decisions and information about selecting colors, fonts, styles, etc. We apply them throughout the entire design system.

All designers should have some knowledge of business and psychology

Although design systems seem like a boring topic in creative industries, #SmashingConf lecturers have also put emphasis on interactive content design and a multidisciplinary approach to content. The design system itself allows designers to deal with major design topics such as illustrating content and defining user flows. Joe Leech had a good lecture on How to Design with Science Without Losing the Magic, and he suggests that all designers should have at least some knowledge of business and psychology. We also attended the workshop by Yuko Shimizu who showed the wonderful use of illustrations in refining interactive content and thus described the web as a highly multidisciplinary place: ”Nothing can replace cooperation – communication and cooperation overcome results.”

P.S. Neuralab is hiring Junior Web Developer so if you’ve reached the end of this article, check out the ad, the position may fit you perfectly 🙂