50 Things You [Probably] Forgot To Design

50 Things You [Probably] Forgot To Design” is a collection of all those tiny (and not so tiny) details that are often left out during the design process for a website, web application, or mobile app.  It covers a variety of bits from favicons to login forms, splash screens, pagination, and welcome emails.

If you only it was available now as a checklist …

UI Museum: Norton Commander 5.0

Norton Commander

Ilya Birman has a massive blog post “UI Museum: Norton Commander 5.0” with almost 60 screenshots (!!!) and user interface feature descriptions of Norton Commander – an icon tool that was used by a whole generation of PC users in the DOS and early Windows era.

Norton Commander was so popular that is spawned a number of other projects that brought similar functionality to other operating systems (Midnight Commander for Linux), later versions of Windows (Far, Total Commander), and even other file management tools (FileZilla, CutFTP) and more.

Good old times…

LINGsCARS.com – website of the day

LINGsCARS.com deserves some kind of title and reward.  I’m giving it a website of the day award, as I’m still stunned for words.

On one hand, it serves as a painful reminder of how the web used to be back in the 90’s.  It got everything from psychedelic background and auto-played music to animated GIFs and mouse hover effects.

On the other hand, it does stand out from all pastel colored material designed websites of today.  Obviously, a lot of work went into building this thing and … somehow … strangely … it works.

Now, please excuse me while I wipe my bloody tears…

P.S.: Yeah it also took me a while to actually prepare that screenshot.  Full-page image was too large.  Cropping it down significantly brought it down to just under 5 MBytes, after which TinyPNG compressed it to just 1.4 MBytes.

History of Icons

History of Icons looks at the evolution of icons used for desktop, mobile, and web.  There are plenty of nostalgia triggering screenshots from a variety of systems.  Given that nobody could ever afford having all of those systems, I’m sure you’ll find interesting screens from computers you didn’t have or didn’t see.

The Difference Between UI and UX

Via this article (in Russian), I came across this blog post discussing the differences between the design of the UI (user interface) and the UX (user experience).

In many cases, the incorrect expectation is that an interface designer by default understands or focuses on user experience because their work is in direct contact with the user. The simple fact is that user interface is not user experience. The confusion may simply be because both abbreviations start with the letter “U”. More likely, it stems from the overlap of the skill-sets involved in both disciplines. They are certainly related areas, and in fact many designers are knowledgeable and competent in both.

However, despite the overlap, both fields are substantially different in nature and – more importantly – in their overall objectives and scope. User interface is focused on the actual elements that interact with the user – basically, the physical and technical methods of input and output. UI refers to the aggregation of approaches and elements that allow the user to interact with a system. This does not address details such as how the user reacts to the system, remembers the system and re-uses it.

Morphos – morphological solution in PHP for English and Russian

If you ever had to deal with morphology in English, you probably found one or two libraries to help you out.  But if you had to do that for Russian, than I’m sure you are missing a few hairs, and the ones that you still have are grayer than they used to be.  I’ve got some good news for you though, now there is Morphos (GitHub repository).

Morphos is a morphological solution written completely in the PHP language. Supports Russian and English. Provides classes to decline First/Middle/Last names/nouns and generate cardinal numerals.

Just look at this beauty!

var_dump($dec->getForms($user_name, $dec->detectGender($user_name)));
/* Will produce something like
  array(6) {
    ["nominativus"]=>
    string(8) "Иван"
    ["genetivus"]=>
    string(10) "Ивана"
    ["dativus"]=>
    string(10) "Ивану"
    ["accusative"]=>
    string(10) "Ивана"
    ["ablativus"]=>
    string(12) "Иваном"
    ["praepositionalis"]=>
    string(15) "об Иване"
  }
*/

Just this alone can make user interfaces and emails so much better.  But there is more to it than that.

CakePHP 3 and the need for breadcrumbs

I’ve been catching up with the CakePHP roadmap.  One of the tickets for the next release (CakePHP 3.3.10, scheduled for tomorrow), is this ticket, relating to the breadcrumbs navigation.

When building applications with CakePHP, you have a couple of easy ways to generate breadcrumbs for the easier user navigation.  One, is to use HTML Helper, which provides a quick and simple way.  The other, is to use a feature rich Breadcrumbs Helper, available since CakePHP version 3.3.6 (but not mentioned in the release notes).

Digging further down into templates, and best practices for user navigation, and different ways of styling breadcrumbs (Smashing Magazine, Hongkiat, UI Patterns), I thought – wouldn’t it be nice to have breadcrumbs navigation built into a human brain?

I mean, how many times did you catch yourself in some dark corner of the Internet, trying to figure out how did you get there?  If only humans had breadcrumbs navigation built into our brains, that would be so easy to trace back the steps.  Browser history can, of course, help, but with so many open tabs and several things happening in parallel, a flat list of tabs is not much help.

WordPress : Preferred Languages Research

Pascal Birchler of the WordPress blogs some interesting research he did in the area of handling preferred language and how different systems – ranging from browsers, wikis, and social networks to all kinds of content management systems – approach and solve the problem.

drupal-language-hierarchy-module

Drupal

Drupal 8 has a rather powerful user interface text language detection mechanism. There is a per session, per user and per browser option in the detection settings. However, users can only choose one language, so they cannot say (in core at least) that they want German primarily and Spanish if German is not available. But the language selected by the user is part of the larger fallback system, so it may fall back further down to other options.

The Language fallback module allows defining one fallback for a language, while the Language Hierarchy module provides a GUI to change the language fallback system. It allows setting up language hierarchies where translations of a site’s content, settings and interface can fall back to parent language translations, without ever falling back to English. This module might be the most interesting one for our research.

Apart from the research itself, I think this is an interesting example of how complex some seemingly simple features are.