{"id":8695,"date":"2014-04-14T20:25:18","date_gmt":"2014-04-15T00:25:18","guid":{"rendered":"http:\/\/mjtsai.com\/blog\/?p=8695"},"modified":"2014-07-11T11:15:13","modified_gmt":"2014-07-11T15:15:13","slug":"hamburgers-and-basements","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2014\/04\/14\/hamburgers-and-basements\/","title":{"rendered":"Hamburgers and Basements"},"content":{"rendered":"

Brent Jackson<\/a> (last year):<\/p>\n

For the iPhone, Apple conjured up three fairly solid navigation patterns: the tab bar, the table view (e.g. Messages & Mail), and the card stack (e.g. Weather). All three work fairly well if used as intended, but there’s always room for experimentation and evolution in UI design – and always room for designers and developers to screw it up.<\/p>\n

Path and Facebook’s mobile left nav flyout pattern is one such experimentation that should be avoided. Mark Kawano<\/a> calls it the “hamburger icon that slides open the basement.” Why call it the basement? Because it’s hidden, dark, there’s a ton of crap in it, and, frankly, it’s scary and no one wants to go down there.<\/p><\/blockquote>\n

The Facebook app has since switched<\/a> to a tab bar.<\/p>\n

Update (2014-07-11): Kelsey Campbell-Dollaghan<\/a> (via Jeffrey Zeldman<\/a>):<\/p>\n

It turns out that the burger comes from the Xerox “Star”<\/a> personal workstation, one of the earliest graphical user interfaces. Its designer, Norm Cox<\/a>, was responsible for the entire system’s interface—including the icons that would effectively communicate functionality to the earliest computer users. The hamburger, which looks like a list, seemed like a good way to remind users of a menu list. Skip to about 21:05 in the following video to see an explanation[…]<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"

Brent Jackson (last year): For the iPhone, Apple conjured up three fairly solid navigation patterns: the tab bar, the table view (e.g. Messages & Mail), and the card stack (e.g. Weather). All three work fairly well if used as intended, but there’s always room for experimentation and evolution in UI design – and always room […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[25,31,26,85],"class_list":["post-8695","post","type-post","status-publish","format-standard","hentry","category-technology","tag-facebook","tag-ios","tag-iosapp","tag-iphone"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/8695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=8695"}],"version-history":[{"count":3,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/8695\/revisions"}],"predecessor-version":[{"id":9105,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/8695\/revisions\/9105"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=8695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=8695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=8695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}