With the goal of finding and optimizing a prominent example of deficient typography in public space, I chose a local transport company. They had previously redesigned everything in a rather careless way, which raised interesting accessibility issues. After watching many people unsuccessfully using the new ticket vending machines – and failing to use it properly myself – I decided to try and fix them, treating the interaction with the interface as a solely typographic problem. I began by charting the path of a user’s attention when buying typical kinds of tickets, and realized that by merely introducing a grid I would be able to significantly reduce the cognitive load during this essential task. After reorganizing its interface accordingly, I moved on to the non-interactive carriers of information and redesigned the schedule posters so that one can intuitively grasp the frequency of buses at any time of day, as opposed to the exact hours.
“User attention graph” of the current ticket vending machine reveals a chaotic situation: Circles mark interactions with the machine, whereas a large circle is a more important interaction. Straight lines mark paths between individual user actions, curves signify irritation – when it is unclear what you have to do next.
“User attention graph” of the current ticket vending machine reveals a chaotic situation: Circles mark interactions with the machine, whereas a large circle is a more important interaction. Straight lines mark paths between individual user actions, curves signify irritation – when it is unclear what you have to do next.
Improving the layout: New graph visualises that ticket retrieval has been disentangled by typographic means
Sample page from documentation book: Displaying how identical timetable information is currently presented in many different forms, requiring the user to relearn each time how to read the information.
The design even works in credit card format. Barely.
More sample pages from the documentation book. The funny hyphenated headings are, so to speak, an allegory to illegible information.
Introducing a grid and functional structure. Adjusting typefaces and hierarchy.
New vending machine in real-world situation (montage)
Introducing a new timetable concept: Actual departures are organised by morning, afternoon and night, while a subtle “Bus density graph” supports your decisions.
Documentation photographs showing how the classic railway information design (originally by Josef Müller-Brockmann, on blue) and the local company's design (orange) are clashing.
Don't be a stranger!
samluescher: #Spotify selects for my evening run: Goth Rock@150 steps/min. ★★★☆☆ for solving my bpm problem while inspiring angst of the cold, big world. Dec. 16, 2015
samluescher: RT @xkcdComic: Operating Systems http://t.co/UneR3KxmJ0 http://t.co/mPBZucr2C1 http://t.co/rw1jR4vHRc April 6, 2015
samluescher: Learn something useful every day before X-mas. http://t.co/Tz9kjNQFoL @24ways Dec. 9, 2014
samluescher: Giving http://t.co/ROdV5mRS5c a spin. Wonderfully designed, it smartly labels and bundles stuff for you. @inboxbygmail fixing @gmail for me? Nov. 5, 2014
samluescher: RT @cesifoti: Advertisement: The Internet's Original Sin http://t.co/fEIE9henlC by @ethanz Aug. 17, 2014
samluescher: #Bash #timesaver of the day: `alias short="that-command-I-type-500-times-a-day"` in ~/.bash_profile; now just type "short" 500 times. Aug. 14, 2014
samluescher: We are overjoyed to announce the launch of our new product, the Form 1+: http://t.co/7pFpU0eBBG. Congratulations team @formlabs #form1plus June 10, 2014
samluescher: So about revolutionizing workflows, there we go again: thanks @wesen for introducing me to the #Chrome #JS Debugger http://t.co/L4n0RQSpHE May 1, 2014
samluescher: @hairyjewbear slow response, sorry I'm not an active twitter user. Form designer updated, should work fine again with a modern django! April 17, 2014
samluescher: Feels like I revolutionize my workflow every 3 months. Added @ZURB Foundation and @compass last week; now http://t.co/vTdYyE5uQG. #olddreams March 10, 2014
samluescher: Very cool use of web #video, and great projects! http://t.co/FwcnDqU6jF Jan. 8, 2014
samluescher: Bye bye #skeuobashing, no more leather + canvas – and we don't even have to pay for it. Thanks Apple. Oct. 22, 2013
samluescher: Impressed with Sketch! Fresh+un-annoying alternative to CS. Try it out, interface designer friends: http://t.co/Yx2vqvfKUW @bohemiancoding Aug. 13, 2013
samluescher: RT @aaronkoblin: Yelp word maps are fantastic. Loving the accuracy of SF "Hipster" http://t.co/0eGW88ncHB Aug. 5, 2013
samluescher: Bem-vindo Brazil @ Rio de Janeiro http://t.co/cIdvvdkZqv July 7, 2013
samluescher: The moment when Apple started to imitate Windows 8. http://t.co/uJhzt6Zzt6 (+ the lost years we spent mastering the Photoshop gradient tool) June 11, 2013
samluescher: Achievement Unlocked: Epidexipteryx https://t.co/S2PAFMqfUn via @coderwall May 30, 2013
samluescher: Obviously the average color of a film frame will be rather dull. Nonetheless, neat #visualization http://t.co/hpkew3YBve May 8, 2013
samluescher: Hard lesson learned [again]: real world just doesn't align with a video feed, a projector AND a virtual world at the same time. #dirtyhacks April 15, 2013
samluescher: So if there are only 15,700 Google results for #SoMoClo, there must still be at least a couple of startup ideas in there, right? April 9, 2013