<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" > <channel> <title>April 2016 – Scott Jensen Design</title> <atom:link href="https://scottjensen.design/2016/04/feed/" rel="self" type="application/rss+xml" /> <link>https://scottjensen.design</link> <description></description> <lastBuildDate>Wed, 27 Apr 2016 14:23:22 +0000</lastBuildDate> <language>en-US</language> <sy:updatePeriod> hourly </sy:updatePeriod> <sy:updateFrequency> 1 </sy:updateFrequency> <generator>https://wordpress.org/?v=6.7.1</generator> <site xmlns="com-wordpress:feed-additions:1">108151652</site> <item> <title>Putting Your Dribbble Likes to Work</title> <link>https://scottjensen.design/2016/04/27/putting-your-dribbble-likes-to-work/</link> <comments>https://scottjensen.design/2016/04/27/putting-your-dribbble-likes-to-work/#respond</comments> <dc:creator><![CDATA[scottjensen]]></dc:creator> <pubDate>Wed, 27 Apr 2016 14:23:22 +0000</pubDate> <category><![CDATA[Uncategorized]]></category> <guid isPermaLink="false">http://scottjensen.design/?p=885</guid> <description><![CDATA[If you're anything like me, you frequently come across amazing shots on Dribbble, you <em>like</em> them, and then, before you know it, you've forgotten about them. And that's the end of the story. That shot gets buried in your account history, likely to never be seen again. I'm a big believer that creative inspiration is usually found in others' creative content, and I decided to actually make something happen with those Dribbble shots.]]></description> <content:encoded><![CDATA[<p> If you’re anything like me, you frequently come across amazing shots on Dribbble, you <em>like</em> them, and then, before you know it, you’ve forgotten about them. That’s the end of the story. The shot gets buried in your account history, likely to never be seen again. I’m a big believer that creative inspiration is usually found in others’ creative content, and I decided to actually make something happen with those Dribbble shots. </p> <p> Remember screensavers? Just like <a href="https://media.giphy.com/media/FSnwQf1mPhN2o/giphy.gif" target="_blank" rel="noopener">payphones,</a> those long-ago hallmarks of box monitors are relics of obsolete technology. But that doesn’t mean a screensaver has to be useless. My office and desk are surrounded by things that inspire me or push my imagination, why should this big black rectangle (or two of them, rather) sit on my desk without anything inspiring to offer? </p> <p> So rather than just <em>liking</em> something on Dribbble (or anywhere, for that matter) and then forgetting about it. I now follow that like with a <em>right click > save image.</em> That image goes inside a Dropbox folder shared between all of my computers, and I set OSX’s “Shifting Tiles” screensaver to sync with it. </p> <div><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/dribbble-screensaver.gif" alt="dribbble-screensaver" /></div> <p> The result is an ever-growing, personally curated source of inspiration that I see every time I sit down to work or spend time on my computer. It’s similar to Underbelly’s <a href="https://dribbble.com/shots/1122972-Dribbble-Popular-Screensaver-FREEBEE" target="_blank" rel="noopener">Apple TV screensaver,</a> but it’s only shots I care about and doesn’t break any TOS agreements since the images aren’t being republished anywhere. It’s a pretty simple solution and a much welcomed addition to the office decor.</p> ]]></content:encoded> <wfw:commentRss>https://scottjensen.design/2016/04/27/putting-your-dribbble-likes-to-work/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">885</post-id> </item> <item> <title>Designing an Alternative to the Hamburger Menu</title> <link>https://scottjensen.design/2016/04/13/designing-an-alternative-to-the-hamburger-menu/</link> <comments>https://scottjensen.design/2016/04/13/designing-an-alternative-to-the-hamburger-menu/#respond</comments> <dc:creator><![CDATA[scottjensen]]></dc:creator> <pubDate>Wed, 13 Apr 2016 13:45:23 +0000</pubDate> <category><![CDATA[Thoughts]]></category> <guid isPermaLink="false">http://scottjensen.design/?p=835</guid> <description><![CDATA[Ok, I’m sure you’re tired of reading articles and hearing conversations centered around the three small lines of the hamburger menu. Is it a bad UI pattern? Is it ok? Well, this isn’t a post about whether it’s good or bad. The fact is, I believe it’s a poor design decision, take it or leave […]]]></description> <content:encoded><![CDATA[<p> Ok, I’m sure you’re tired of reading articles and hearing conversations centered around the three small lines of the hamburger menu. Is it a bad UI pattern? Is it ok? Well, this isn’t a post about whether it’s good or bad. The fact is, I believe it’s a poor design decision, take it or leave it. But here’s the problem – the hamburger menu does have some strong advantages, especially when used in mobile design where pixel real estate is tight. So what can we do? Just accept the hamburger menu, despite its negative consequences, and move on? A lot of apps and websites seem content with that decision. I feel like we can do something better. </p> <p> Before we get too far down the rabbit hole, I want to tell you what brought me to this opinion in the first place. Several months ago, I actually had no beef with the hamburger menu (see what I did there?). In fact, I viewed it as a progression in mobile navigation UI. Something that was bound to become a standard. Plenty of prominent sites and apps were adopting it, and if it was good enough for them, it was good enough for me. </p> <p> Then two things happened that shook me out of my indifferent opinion. First, I came across <a href="http://deep.design/the-hamburger-menu/" target="_blank" rel="noopener">this great article.</a> If you haven’t read it yet, do yourself a favor and read it. Go ahead, I’ll wait for you to finish. It’s an article that really dives into the consequences of using a hamburger menu. Namely, sites that implement it see a significant loss in user engagement. Seeing hard data like this resonated with me and began to change my mind about the hamburger menu. </p> <blockquote><p>If someone this smart has a problem navigating it, what does that say about a typical user?</p></blockquote> <p> The next incident involved an interaction I had watching a colleague try to use a new webapp that happened to utilize a hamburger navigation menu. He was a developer and extremely familiar with the hamburger UI, but when it came down to using the app for what he needed, he actually said out loud “How do I get to that?” Keep in mind, this is one of the smartest people I know, and he didn’t even think to try the hamburger menu. If someone this smart, this familiar with that type of UI has a problem navigating it, what does that say about a typical user? My opinion had officially found a solid foundation. </p> <h3>Finding a Solution</h3> <p> So enough about why I don’t believe in using the hamburger menu – it’s time to talk about a solution. To do that, I looked at the specific benefits to using the hamburger menu: </p> <ul> <li><strong>Scalability:</strong> This is probably the biggest benefit and the reason so many sites and apps choose to use it. You can fit <em>a lot</em> of navigation when you tuck it behind a drawer.</li> <li><strong>Tidiness:</strong> This is related to scalability, but it’s not the same. There is a desire to keep designs neat and tidy and leave room for the main content of a design. Using a hamburger menu gives designs an overwhelming sense of visual simplicity that will be attractive to any designer.</li> </ul> <p> And if there is going to be an alternative to the hamburger menu, it needs to somehow solve the problems associated with it: </p> <ul> <li><strong>Discoverability:</strong> Features and specific items in the navigation should be easy to find and discover for users, especially users that are using the product for the first time.</li> <li><strong>Engagement:</strong> The UI should provide hints and feedback to what a user <em>can</em> do within the product, and prompt them to use those features by surfacing them in the UI.</li> </ul> <div class="pull-right"> <img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/tabburger-menu.gif" alt="tabburger-menu" /> </div> <h4>The Hard Part: Mobile</h4> <p> I decided to start with the hardest problem and see if a solution could come out of the mobile-first approach. After a lot of ideation, I came to terms that the iOS tab bar menu was actually one of the best solutions for mobile. Plenty of people have tried to make this work by making the tab bar scrollable (fitting more than five options in it) or by providing a “more” tab to tuck other miscellaneous options under. But a scrollable nav feels weird, and putting “more” in your nav is like a hoarder with a spare bedroom – eventually it will get filled with garbage. Also, both of those options still suffer from a lack of discoverability. So what can be done to the tab bar menu to make it scale past five items? </p> <p> My solution came from imagining how the two UI patterns – hamburger and tab bar menus – could be combined into the same approach. The result is a tab bar control that brings up a drawer of options related to that menu item. </p> <p> I’ve made up a fake team productivity app to illustrate how this could work. By using this approach, the user can still clearly see the main features and uses of the product. And rather than being bombarded with a full list of nav items in a hidden hamburger menu, they are only shown a handful of choices that are related to the tab they tapped on. This makes the navigation easy to consume, keeps it discoverable, and also allows the user to understand hierarchy within the app. </p> <p> Another benefit to this type of design is the ability to keep contextual notifications. If you are trying to use notifications with a hamburger menu, you have one place and one place only to show those notifications. Keeping a tab bar layout allows you to prompt the user with notifications for any of the particular menu items. </p> <div style="text-align:center;"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/notification.png" alt="notification" style="border:1px solid #EAEAEA;" /></div> <p> Of course, the biggest win to this UI is its scalability. Yes, it will still force smart decision making for the IA of the product or site, since you are limited to five categories, but that is a good thing. Honestly, I think just about any site <em>can</em> be fit into five categories if the designer is smart about it. But beyond that, each of these categories can have five to six sub navigation links. This allows an app to scale up to 30 navigation options without feeling overwhelming to the user or without destroying the screen real estate market. </p> <h4>Scaling Up to Tablets</h4> <p> Simply implementing this tab bar on a tablet felt a little weird. Tablets have a lot more width to work with, and using this exact UI felt like an awkward teenager that hadn’t quite grown into his clothes yet. So I took it another direction (literally, ha!). Instead of putting the tab bar on the bottom, I went with putting it along the side. This was a better way to utilize the screen, and felt really natural. As an added bonus, most people hold tablets on the sides, so this is prime real estate for thumbs that are just waiting to take action. </p> <div> <img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/tabburger-ipad-1.png" alt="tabburger-ipad" style="border:1px solid #EAEAEA;" /> </div> <h4>What About Desktop?</h4> <p> Brace yourself… flyout menus. That’s right – scale this thing up to a desktop experience and you’re met with an undeniable reality: this UI isn’t anything new. Flyout menus have been used on the web for years, and just about any user (even your mom) knows how they work. That’s the real beauty of this UI – it really is nothing new. </p> <div class="full-width"> <img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/tabburger-desktop-1.png" alt="tabburger-desktop" style="border:1px solid #EAEAEA;" /> </div> <h3>Full Disclosure</h3> <p> I don’t know what to call this thing. A tab drawer? The TABurger menu? the garden burger menu? Furthermore, I don’t know if anyone else has built or designed something like this before. With how simple it is, I can’t imagine that I’m the first. I know there are a few apps that use flyouts on some of their tab buttons (like Tweetbot, for example), but those are usually built as shortcuts for power-users rather than augmenting the navigation hierarchy. If there <em>is</em> an example like this out there, feel free to <a href="https://twitter.com/intent/tweet?text=Hey%20@_scottjensen,%20your%20ideas%20are%20totally%20unoriginal!" target="_blank" rel="noopener">let me know,</a> and I will happily append this post. </p> </p> <p> Whether this is something new or it’s something that’s been done before doesn’t really matter. What <em>does</em> matter is that there are better, more creative solutions to navigation than the hamburger menu. Stop telling yourself “well <em>this</em> super duper website is using it, so it must be ok,” or “Everyone is doing it so it will eventually catch on.” You know what else “everyone-is-doing-so-it-must-be-ok?” Mediocrity. And design deserves better than that. </p> <div class="rule" style="margin-bottom:30px; border-top:1px solid #EAEAEA; height:1px width:100%;"></div> <h3>UPDATES</h3> <p> <a href="http://blog.scottlogic.com/ceberhardt/" target="_blank" rel="noopener">Collin Eberhardt</a> pointed out on <a href="https://twitter.com/ColinEberhardt/status/723553018306813952" target="_blank" rel="noopener">Twitter</a> that a similar UI is utilized in the Windows Phone. I’m actually a Windows Phone user myself (*gasp!*), and he is right. However, WP only uses this type of interaction for their “more” option in the tab bar. </p> <p> <a href="http://blog.hotdang.ca/" target="_blank" rel="noopener">James Perih</a> passed along another example on <a href="https://twitter.com/hotdang_ca/status/723608736342761473" target="_blank" rel="noopener">Twitter</a> where someone else has implemented a similar solution. Take a look at the <a href="https://cocoapods.org/pods/AHTabBarController" target="_blank" rel="noopener">AHTabBarController</a> by <a href="https://github.com/ArthurDevNL" target="_blank" rel="noopener">Arthur Hemmer.</a> </p> <p> <a href="https://twitter.com/ManuelRauber" target="_blank" rel="noopener">Manuel Rauber</a> implemented a great version of this nav concept into a sample app and <a href="https://github.com/thinktecture/windows-developer-cross-platform-article-series" target="_blank" rel="noopener">put the code on Github.</a></p> ]]></content:encoded> <wfw:commentRss>https://scottjensen.design/2016/04/13/designing-an-alternative-to-the-hamburger-menu/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">835</post-id> </item> <item> <title>What I Think of Adobe XD</title> <link>https://scottjensen.design/2016/04/06/what-i-think-of-adobe-xd/</link> <comments>https://scottjensen.design/2016/04/06/what-i-think-of-adobe-xd/#respond</comments> <dc:creator><![CDATA[scottjensen]]></dc:creator> <pubDate>Wed, 06 Apr 2016 16:41:56 +0000</pubDate> <category><![CDATA[Uncategorized]]></category> <guid isPermaLink="false">http://scottjensen.design/?p=768</guid> <description><![CDATA[When I learned that Adobe was building a new product that was focused around user experience design and prototyping, I was thrilled. Back then, it was under the code name of “Project Comet.” I’ve been anxiously awaiting it for quite some time now. But before it was released, I found out it wouldn’t be just […]]]></description> <content:encoded><![CDATA[<p> When I learned that Adobe was building a new product that was focused around user experience design and prototyping, I was thrilled. Back then, it was under the code name of “Project Comet.” I’ve been anxiously awaiting it for quite some time now. But before it was released, I found out it wouldn’t be just focussed on UX and prototyping – it would also include design tools baked into it. That might seem like a good thing, but to me, it was a bad sign: </p> <div style="text-align:center;"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/Screen-Shot-2016-04-06-at-12.31.55-PM.png" alt="twitter" style="box-shadow:0px 4px 13px rgba(0,0,0,.2);" /></div> <p> This was concerning to me because it meant that the feature set would be split between two different approaches. Thanks to Adobe, I already have great apps for creating designs. Illustrator and Photoshop are incredibly powerful, and between the two of them, I can create designs for just about any media. If Adobe Comet was going to try to be a design app, it was likely it wouldn’t support the feature-rich design process that I already enjoy in Illustrator. But I took comfort in a reply from one of the project managers from Adobe: </p> <div style="text-align:center;"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/Screen-Shot-2016-04-06-at-12.32.16-PM.png" alt="Twitter" style="box-shadow:0px 4px 13px rgba(0,0,0,.2);" /></div> <p> Ok. Adobe has done a really great job at making their apps work together. I’m sure when Project Comet comes out, it will have some awesome import/linking options for Illustrator and Photoshop files. </p> <h3>No, I Was Right – It’s Unusable</h3> <p> Adobe officially released project Comet and called it Xd (Experience Design). And after a couple of weeks of working with it, my fears for the product have been completely realized. Xd can’t decide what type of app it wants to be. Is it a design platform? Is it a prototyping tool? It is as if Sketch and inVision got a little tipsy one weekend and Xd was the ugly, socially inept love child of that mistake. It is an empty app, with limited features for design and even more limitations for prototyping. </p> <h4>The Design Features</h4> <p> Before we get too far down the rabbit hole, you’re probably wondering “What about the integration into AI and PS?” Here’s your answer: copy + paste. Adobe, in their infinite wisdom, thinks that copy + paste counts as integrating two products together. If you copy a PS file, it doesn’t do anything neat like pulling in individual layers or anything like that. It’s a flattened image. That wouldn’t be so bad if you could at least <em>link</em> the PS file – but no, there isn’t any concept of linking in Xd. Illustrator files get a slight advantage, as they remain vectors that can be modified inside of Xd. But again, no linking, no importing, nothing. </p> <div class="pull-right"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/Screen-Shot-2016-04-04-at-7.22.27-AM.png" alt="color picker" /></div> <p> Anyone who has used Sketch at all will notice that Xd is a blatant response to that platform. How the artboards work, the tool bar and inspector, it all feels a whole lot like Sketch and very little like Adobe. Even a lot of the shortcut keys that I’ve found standard in CC have changed in Xd. I think that was a mistake on their part. The whole app feels like it was built from scratch, reproducing or omitting design tools that already exist and that are more powerful in other Adobe products. A great example of this is the color picker. Rather than incorporate the typical Adobe picker, they’ve punted and gone with the OSX default (gotta love that colored pencil option!). </p> <p> There are a number of severe limitations to the tools, as well. Type settings only allow for the selection of font size, typeface, justification, and letter spacing. No line height or paragraph options exist. There’s also no way to create gradients, and anyone used to working with those in Illustrator will miss that quick. And it pretty much goes without saying that none of the raster effects like blur, inner glow, etc. are available. </p> <p> To sum it all up, here are the design features Xd needs in order for me to find it usable: </p> <ul> <li>Gradients</li> <li>Adobe’s Color Picker</li> <li>Better Typography Options</li> <li>Import/Linking to Other Adobe Files</li> </ul> <h4>The Prototyping Features</h4> <p> Since the design side of the app isn’t usable to me, I thought there might be some hope for the prototyping side. I was wrong. This portion of the app feels less than half-baked, and anyone accustomed to building their user flows with InVision will quickly abandon this product. There are only a few transitions to choose from between screens, and some of them aren’t even handled in the correct behavior. There isn’t any ability to drag and create custom hotspots on the design. Instead, you’re forced to select one of the design elements as a clickable area. That’s not a big deal if you created the design in Xd, but, as I already mentioned, that isn’t an option. Xd also doesn’t support any type of fixed headers or footers or overlay screens. All of these are givens if you’re working with InVision or Marvel App.</p> <p> To sum it up, here’s what I need to use this as a prototyping tool: </p> <ul> <li>Custom Hotspots</li> <li>Hotspot Templates</li> <li>More (and Better) Screen Transitions</li> <li>Overlay Views</li> <li>Linking to the Previous Screen</li> <li>Fixed Headers/Footers</li> </ul> <h3>There are a Few Good Things</h3> <div class="full-width"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/Screen-Shot-2016-04-04-at-8.15.48-AM.png" alt="Xd UI Kits" /></div> <div class="pull-right"><img decoding="async" src="http://scottjensen.design/wp-content/uploads/2016/04/xd-repeat-grid.gif" alt="xd-repeat-grid" /></div> <p> Despite everything, there <em>are</em> some really great things in Adobe Xd. One of them is that it comes baked with UI kits for Apple, Google, and Windows platforms. These are a few of the options on the start screen, which also allows you to easily choose some standard artboard sizes based on common devices. Another great feature is the ability to adjust the easing of the screen transitions when building the prototype. Both the length of the transition and the type of easing can be changed. Given Adobe’s experience with motion graphics in their other apps, this could give way to a really powerful animation engine. That is, of course, assuming they incorporate those features rather than just keeping this in a silo from their other products like they have so far. </p> <p> There’s also some nice design features in the interface as well. The biggest win is the ability to repeat a grid as much as you’d like. This has been a big thing in Sketch for some time now, and it’s great to see it in an Adobe product. It is fantastic for designing anything with list items or any other repeating elements. Furthermore, Xd even allows you to drill into each of them to customize its text and appearance. This takes a lot of the pain out of UI design, and makes it easy to make realistic comps showing how the UI handles different types of data in the list. </p> <h3>TL;DR</h3> <p> The bottom line is that Xd is not a mature product and is unusable to me in its current state. So much work went into duplicating features that already exist in other Adobe products, while very little effort was actually put into the prototyping tools that would actually be a welcome addition to the CC. I’m not looking for a new design tool, and Adobe doesn’t realize that. Instead, they are creating tools like this to compete with Sketch. It’s obvious that this product isn’t meant for me, someone already using Adobe’s products and happy with them. This is meant as a way to get back users who are abandoning Photoshop for Sketch. What <em>I really need</em> is a competitor to inVision. And for now, Adobe is not that competitor. InVision has better prototyping <em>and</em> commenting (also a big wish for Adobe to create) and I will stick with them for now. </p> <p> And as for all of these neat-o new design features? They should just be incorporated into Illustrator and Photoshop. There’s no reason to build them within a new app and not incorporate them into the flagship design apps in the first place. </p> <p> Sorry, try again Adobe.</p> ]]></content:encoded> <wfw:commentRss>https://scottjensen.design/2016/04/06/what-i-think-of-adobe-xd/feed/</wfw:commentRss> <slash:comments>0</slash:comments> <post-id xmlns="com-wordpress:feed-additions:1">768</post-id> </item> </channel> </rss>