{"id":7908,"date":"2016-11-07T11:54:05","date_gmt":"2016-11-07T08:54:05","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=7908"},"modified":"2020-10-26T19:59:03","modified_gmt":"2020-10-26T16:59:03","slug":"touch-bar-interface-for-slack-railsware-vision","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/touch-bar-interface-for-slack-railsware-vision\/","title":{"rendered":"Touch Bar interface for Slack. Railsware vision."},"content":{"rendered":"<p class=\"intro-text\">As it is well known by (almost) every Mac user who is alive and conscious, On October 27th Apple unveiled their updated notebook line. Although there are a ton of buzz about it being underpowered and overpriced, we would not rush to conclusions until actual devices will be shipped to the customers and real hands-on experience show if it\u2019s a rare fail or just another triumph of this \u201cfruit company\u201d.<\/p>\n\n<p>All other factors aside, the \u201ckiller&#8221; feature of the new MacBook Pro is the 2170x60px retina Touch Bar (equivalent to 1085pt by 30pt) with the Touch ID sensor. The Touch ID sensor looks like a very useful thingy for all paranoids (including yours truly) that still have a password on their mac. The rest of this shiny add-on is not that obviously useful and the use cases presented during the keynote did not prove the case well enough.<\/p>\n\n<p>Let\u2019s imagine how this feature could work with an app that all of the Railswarians use on a daily basis \u2014 <a href=\"https:\/\/slack.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Slack<\/a>. We are actually not aware if guys from the Slack team are planning to take an advantage of this new functionality to improve already well thought-through UX of the app but sure hope so.<\/p>\n\n<p>We will not go through a first-time user experience and onboarding process (we are just doing a sort of creative exercise here, it would be definitely considered otherwise), let\u2019s assume that our target auditory is already familiar with Slack. Also, we are not going to cover all the cases the Touch Bar could be useful in, just a few.<\/p>\n\n<p>So, let\u2019s flex our design muscles and get cracking!<\/p>\n\n<p>When Slack finishes loading and you are back to the last opened channel, the Touch Bar would help to put all important controls closer to your fingertips. Channel details is already expanded in this case:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_0_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_0_1@2x.png\" alt=\"Default state (conversation details on)\" width=\"2268\" height=\"450\" \/><\/a><\/p>\n\n<p>By the way, we are going to bend rules of <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/macos\/overview\/themes\/#\/\/apple_ref\/doc\/uid\/20000957-CH104-SW1\" target=\"_blank\" rel=\"noopener noreferrer\">Apple guidelines<\/a> here a bit and show unreads. It\u2019s not new information and it is already displayed on the main screen, so it should not distract and going to help a lot if you just staring down on the Touch Bar. For example, when scrolling through your fellow Slack users. But let\u2019s not get ahead of ourselves.<\/p>\n\n<p>Next, when you&#8217;ve decided to become vocal and put your cursor in the message field (same happens when you change current channel), pre-cooked @channel (or @username in case of a personal channel), @group (in this case let\u2019s imagine that we are a part of design team) and @here could save you some typing if you are going to say something more important than usual. When you\u2019d start to actually put something in, quick type suggestions are going to take over:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_2_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_2_1@2x.png\" alt=\"Message field is in focus, nothing typed in\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>Let\u2019s tap the Quick Switcher. You can quickly search for a conversation or browse through personal and group channels. Which way of finding people to chat with works best for you?\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_3_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7915\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_3_1@2x.png\" alt=\"Quick Switcher\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>For an example, here are all of your beloved colleagues sorted by most frequent conversations. You can also sort them by recent, unresponded messages, starred and so on. And looks like we just found one more reason to ask some people to add real pictures to their profiles\u2026\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_4_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7914\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_4_1@2x.png\" alt=\"People finder\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>If you can\u2019t recognize somebody \u2014 no worries, you can tap and hold to see the name and proceed to direct messaging (or not, up to you):\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_5_1@2x.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7913\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_5_1@2x.jpg\" alt=\"People finder touch-and-hold\" width=\"2392\" height=\"1206\" \/><\/a><\/p>\n\n<p>\u201c+&#8221; (New&#8230;) options. Bring stuff in or start creating your own content:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_6_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7912\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_6_1@2x.png\" alt=\"\u201cNew...\u201d (+)\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>Emoji. Plain text is sooo boring, right? Here are your most frequently used ones:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_7_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7911\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_7_1@2x.png\" alt=\"Emoji\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>Not enough? All Slack categories are available:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_8_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7910\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_8_1@2x.png\" alt=\"Emoji categories\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>And last but not least \u2014 some text formatting options that will appear if you select a piece of text. Very nice to have if you forget the syntax all the time or just as lazy as me:\n<a href=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_9_1@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-7909\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_9_1@2x.png\" alt=\"Text formatting\" width=\"1562\" height=\"170\" \/><\/a><\/p>\n\n<p>That\u2019s it for today! And you know what? I don\u2019t mind to try using Slack this way, could be convenient. Well, let\u2019s wait and see if the new MacBook Pro and the Touch Bar in particular as good (bad?) in reality as it is on paper.<\/p>\n\n<p>I hope you had as much fun reading this post as we had while creating the concept. Please don\u2019t hesitate to tell us what do you think about it and stay tuned!<\/p>\n\n<p>P.S. Check out our corresponding <a href=\"https:\/\/dribbble.com\/shots\/3073612-Touch-Bar-interface-for-Slack\" target=\"_blank\" rel=\"noopener noreferrer\">Dribbble shot<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As it is well known by (almost) every Mac user who is alive and conscious, On October 27th Apple unveiled their updated notebook line. Although there are a ton of buzz about it being underpowered and overpriced, we would not rush to conclusions until actual devices will be shipped to the customers and real hands-on&#8230;<\/p>\n","protected":false},"author":35,"featured_media":9422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[51],"tags":[],"coauthors":["Andrey Khorolets"],"class_list":["post-7908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Design","link":"https:\/\/railsware.com\/blog?category=design"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2016\/11\/slk_tch_br_0_1@2x.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=7908"}],"version-history":[{"count":32,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7908\/revisions"}],"predecessor-version":[{"id":12854,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7908\/revisions\/12854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9422"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=7908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=7908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=7908"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=7908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}