Refactoring UI book – my notes

Written on 19 February 2019, 11:49am

Tagged with: ,

For some reason, I still prefer the paper version…

Here are some notes relevant to me after reading the Refactoring UI book:

  • border radius: large=playful, no radius=formal. Just be consistent, not like Dropbox
  • you can highlight an element by de-emphasizing the others
  • sometimes the labels are not needed… but some other times they are mandatory. Just use your common sense. Also, make sure there is no confusion about which label belongs to which value
  • differentiate between primary vs secondary (or tertiary) actions
  • stick to 45-75 characters per line if you want to play it safe
  • line height and font size are inversely proportional
  • if some paragraph is longer than 2-3 lines, it will look better left-aligned
  • always right-align numbers
  • don’t rely on color alone: use the contrast, or even better, add patterns
  • try to emulate a light source when working with non-flat interfaces
  • don’t scale up small icons, just re-draw them completely to add more details. Conversely, don’t scale down big icons, just re-draw them (ex. draw a separate logo and scale it down to obtain the favicon)
  • don’t simply copy/paste screenshots: either paste screenshot from phone/tablet mode, zoom-in to the relevant section, or use a generic UI
  • lists don’t necessarily mean bullet points: can be check-marks or locks
  • re-think drop-downs, tables and radio buttons

I was surprised by the amount of useful information I learned in what felt like a couple of hours read. This is more than a simple book that you close and put away after you’re done reading it; it’s something that you might come back to from time to time for inspiration when you work on your next design project.

Notes made with workflowy

10 things that I liked in 2018

Written on 31 December 2018, 12:50pm

Tagged with: , , , , , , ,

In the last day of the year, it’s time to look back at the year and highlight the things that enjoyed in 2018. For reference, here is the list from the last year.

1. Two books: Daemon and Freedom, by Daniel Suarez. Absolutely brilliant, I don’t know how I missed them for so many years. Here’s an excerpt:

The Code book from Simon Singh was probably the runner-up – a few months ago I ordered the printed version and read it again after 5 years.

2. My new notebook: Huawei Matebook x Pro. Say what you want about Huawei, but they came up with a brilliant device. Miles ahead of the premium-priced Macbooks, it fundamentally changed my workflow. Never been a tablet guy and probably never be, so the combination of an iPhone + an ultrabook like the Matebook works best for me.

3. WorkFlowy: an exponent of the makers (*) culture, WorkFlowy is a dead-simple, cross-platform note-taking app. The hierarchical structure of the notes makes it compatible with mind-mapping and I found myself using it in a variety of ways. For instance, I drafted the outline of this post in WorkFlowy. Others wrote books with it:

(*) the makers culture: Peter Levels https://levels.io/ https://makebook.io/
https://twitter.com/ajlkn https://carrd.co/

4. A place: the Austrian Alps in the summer time. I had the chance to spend about a week in the mountains. The combination of mountains, clean air, outdoor activities and clear blue sky is amazing. Just have a look:

5. Security. 2018 was the year I learned a lot about security. Went to a few classroom training sessions (CISM, CISSP, TLS), passed some challenging certification exams, and realized that (IT) security is a fascinating domain with a lot of brilliant people.

The IT industry rocks (as one of the security guys that I follow said today), and on top of that, the security aspects make things much more interesting to watch.

6. Simona Halep: not only for finally winning her Grand Slam, but also for having the capacity to remain competitive for a long time: never dropped out of the top 10 for over 5 years and currently number 1 for more than a year (with a brief 4-weeks interruption). Well deserved and very inspirational.

Simona Halep, Roland Garros 2018, Simple Dames, Finale, Photo : Nicolas Gouhier / FFT

7. Two series: Breaking Bad and Better Call Saul. I enjoyed watching Breaking Bad when it was released on Netflix, and found the Better Call Saul a very good continuation of the series. Now that Better Call Saul is over, I went back to re-watch Breaking Bad – it’s amazing how a few years and another prequel change the perspective.

https://breakingbad.fandom.com/wiki/Mike_Ehrmantraut

8. Jurgen Klopp. He joined Liverpool 3 years ago and built an amazing team around him. One can learn a lot about leadership just by listening to his interviews. Humble and determined, he’s a perfect fit for Liverpool and you can sense how everybody around the club loves him.

https://twitter.com/stuffIfc/status/1079432962062671873/photo/1

9. The iPhone X – because the dimensions are finally right, and, more importantly, because its camera allowed me to take some amazing photos throughout the year: https://www.flickr.com/photos/dorin_moise

10. Tesla Model S. Finally, I left this at the end because it offered me some very mixed feelings. As I said in a recent post, the car is really amazing and it offers an experience that you will not find anywhere else. But the quality of the support services is disappointing here in Belgium. I hope that things will improve, even though I’m not holding my breath.

Here’s for a brilliant 2019 and remember, in the end it’s all about getting better.

Inclusive design: some principles and notes

Written on 29 April 2018, 09:01pm

Tagged with: , , ,

Time to mix IT security with web design, so a few notes from the first chapters of Inclusive Design Patterns, by Heydon Pickering.

Some basic principles:
– always use semantic structures (ex. use the lang attribute)
– prefer existing HTML elements instead of inventing new structures. In other words, embrace standard behavior. If you can use a native HTML element, then do so.
– use progressive enhancement: HTML, then add CSS, then add JS (also known as ‘content first design’)
“If it’s not curlable, it’s not on the web”
Henny Swan UX principles: give users choice, put the users in control, design with familiarity in mind, prioritize features that add value
– remove redundancy (ex. instead of having a logo and a ‘home’ label both pointing to the homepage, consider turning the logo into a navigation link)

Fonts:
– never use absolute font size (ex. 16px), use the relative measures
– use rem over em to avoid font size nesting problems
– font display problems (especially when using web fonts): FOIT – Flash of Invisible text, FOUT – Flash of Unstyled text. See SmashingConf London — Zach Leatherman on ‘Web Fonts are ▢▢▢ Rocket Science’
– start using font-display: swap, optional, fallback (Chris Coyier – If you really dislike FOUT, `font-display: optional` might be your jam)
– when using web fonts, you can specify to download only the characters that you need: https://fonts.googleapis.com/css?family=Roboto&text=ABCDEFGH

Accesibility:
– try to navigate your website using only the keyboard: skip links, tab index, highlight the focused element
– the ‘skip to content’ links are mostly for sighted, keyboard-only users
– make sure that all the elements are focusable, that the focused element is visible and highlighted
– try to navigate your website using a screen reader
– design for the extremes:
– design for the people with poor networks: the ones with good networks will also be happy
– design for the people with readability problems (ex. dyslexia or color vision deficiency): the other users will also benefit
– always provide alternative text
– don’t differentiate by color alone
– don’t make the touch targets too small (believe it or not, everybody has fat fingers)

Do not break conventions:
– allow pinch to zoom
– use blue and underlined links (color is not sufficient, use underline as well)

The human brain uses patterns called schemata to understand sense data. Schemata constitute prior experience against which current experience is evaluated.
In programming terms, schemata are a kind of cache for understanding. So long as a familiar thing is being experienced, little more effort is required to understand it.
By the same token, if something genuinely new is experienced, there’s nothing in the cache to be relied on and thesense data must be evaluated in full
smashingmagazine.com/inclusive-design-patterns/

Design
– prefer left align of text instead of justified (especially for narrow columns)
– be careful with the line height: the users will zoom in. Never use absolute font size!
– warn the users about the external links
– automatically add icons from CSS instead of the WYSIWYG editor (example: icons for the external links that will open in a new tab)
– make the link texts descriptive
– if you use video, think about closed captions. They are not only for the users with hearing problems (ex. watching it without volume)
– don’t be afraid of using relative #links in the navigation menu
– SVG is probably the best option to design the hamburger MENU button (instead of image, font, unicode character, etc)
– if you have an online store, use microdata to have rich snippets in the search results
– if you have to implement infinite scrolling, then consider having a ‘load more’ link for the keyboard users. Or think if it’s the right thing to do 🙂
turn the placeholders into labels when the users start typing

Content
– follow the ‘content-first’ guidelines
– keep it short, avoid passive sentences, eliminate redundancy, vary the length of sentences
– use readability tests (ex. Flesch)
– when creating your headings, think about the table of contents (do the headings still make sense when reading in the ToC?)
– don’t make your site content dependent on client-side JavaScript
– everybody loves table of contents, especially if the content is long

In the end, a strong conclusion: it’s all about the end result. What we have to design is processes, not screens.

People are not really into using products. Any time spent by a user operating an interface, twisting knobs, pulling levers or tapping buttons is time wasted. Rather, people are more interested in the end result and in obtaining that result in the quickest, least intrusive and most efficient manner possible.
We will design processes, not screens.
We will design systems, not individual pieces.
We will design less “using,” and more getting results.
– Goran Peuc – Nobody Wants To Use Your Product