Strack @ Adobehttp://blogs.adobe.com/strack
Thoughts and discoveries in the Adobe UX landscapeMon, 23 Jun 2014 18:12:42 +0000en-UShourly1https://wordpress.org/?v=4.6.1Pleasantness in my idiocyhttp://blogs.adobe.com/strack/2014/06/23/pleasantness-in-my-idiocy/
Mon, 23 Jun 2014 18:12:42 +0000http://blogs.adobe.com/strack/?p=180Continue reading →]]>Okay, this is one of those moments when I realized that I’m still a noob in SO many ways, but i really don’t care, because what I found/discovered makes me so happy that it trumps my insecurities.

Being able to cycle between windows in the same app, on a Mac, is something that (until today) I wasn’t aware had a shortcut key.
So, for example, if you have multiple windows of Chrome and you want to cycle between them, or you have multiple emails open in Outlook and want to go between them instead of seeing your inbox, you can simply press this key combo, and it will cycle for you!

I found it by accident, which makes it even sweeter:

COMMAND+`

(⌘+`)

That’s right, that top left ` key, just below the ESC button will toggle screens for you.

If anyone else out there didn’t know that this existed, you’re welcome. If you already knew this existed, and are silently judging me, I don’t care; I’m experiencing pleasantness in my idiocy

I received the BEST present for Christmas, in the form of the book Semiology of Graphics by Jacques Bertin. This book is pretty much everything you could want in a book, if you’re interested in semiology / semiotics, and infographics.

As I’ve been perusing (totally using that word wrong!) my precious copy, I had the thought occur to me regarding calendars and mixed metaphors.

Way too many years ago, I was working on a project to deliver email cases to customer support reps. The cases needed to be sorted by multiple different attributes, including:

Time in queue

Category / Type

Number of previous replies

…among others. Well, we tried to represent some of these sorting attributes using a file tree component. We quickly learned that you can’t represent multiple attributes in one file tree. You have different hierarchies, and trying to represent them in a single hierarchy is against the laws of physics. Well, it’s against the laws of semiotics, but you get the picture.

So, as I was thinking about that previous debacle of an experience, and about clearly displaying time, it occurred to me that most calendar or project apps- which show a standard graphic representation of a calendar, with each week being a row – mix metaphors:

What you’re after, usually, is a visualization of project resources and ETAs for portions of your project. This type of visualization is best represented by a Gantt-type of view, with a timeline and various project lengths represented easily.

What you end up with is a Calendar with a bunch of bars going across multiple rows, or meaningless dots. The effort to properly visualize such a debacle of an experience is immense, and significantly takes away from discussion or analysis.

It helps me to know that, when I see such a mixed-metaphor calendar project timeline, it’s not my fault that I can’t understand it. Just like my multiple-attribute file tree experiment, it’s beyond the laws of semiotics.

I have some (wicked, wicked) plans on how to resolve this problem, but I’m not quite yet ready to share it. Will expand on this later, but thought I’d get the idea out there and see whatchyall think.

We all know the margin: auto trick for horizontal centering, but if you combine position: absolute, and set the top and bottom properties to 0, guess what? It’s worky for vertical centering as well!

Stephen Shaw’s article goes on to show that it works in most scenarios, including padding, offsets, and even responsive resizing.

I gave it a little run in CodePen, specifically wanting to see what happens when the absolute centering is inside of a container, and you move that container around. The results of my experimentation are here:

Sure enough, the vertical centering stays true to the CSS rules around position:absolute (If the containing element is relative or fixed, positioning — and in this, case centering — is relative to the bounds of the container). As you can see from the screenshot, in addition to the immovable, centered div (with a nested centered div inside of it), there are two fanciful elements, with all their fancy dragging abilities. Each draggable element has double nested, vertically centered divs inside.

In short, it works like a charm.

I did, however, make one modification for text, and that is to treat the div containing text with display:table.
The reason for this is so that we can vertically center multi-line and single-line text. If we employ the vertical centering CSS, like Stephen did, to a div with text, the text won’t ‘cheat up’ on multiple lines. The fix for this is pretty straightforward:

.txt{
text-align:center;
width:100%;
display:table;
}

[Update: the height is automatically calculated, so no reason to set it, unless you maybe want to look at compatibility/fallback — Thanks Stephen!] You’ll notice the height property is set to 2.4em. Setting the height to this value is a good approximation for the amount of height needed when you have a multi-line text div.

If you want to display a single line in the center, just add the following:

.single{
height:1em;
}

Feel free to play around with the CodePen example, and do make sure to check out Stephen Shaw’s article.
He did the heavy lifting here, I’m just propagating a great code snippet.

]]>Shout out to a pleasant designhttp://blogs.adobe.com/strack/2013/03/05/shout-out-to-a-pleasant-design/
Tue, 05 Mar 2013 22:06:30 +0000http://blogs.adobe.com/strack/?p=141Continue reading →]]>Well my goodness, I came to make a blog post, and an hour went by with me just tweaking blog settings. Tsk, tsk, tsk…

I ran across, of all things, a medical applications review website today, and looking at the design, I was impressed with it. Impressed enough to give imedicalapps.com a quick shout out.

Note, for example, the “Top Stories” section, and the most conversate-ed sections, with the color coding and width displaying statistical significance:

Their feeds or page transitions are really slick too, going from side-to-side. I also like the simple, flat spartan lines.
Whether or not you like the design, you can tell that there is planning and conscious design at work:

I have no idea how good their reviews are. I seriously don’t like how the entire page needs to reload on a top menu item click. But It was a pleasant surprise to come across a neat, tidy little design in an industry (medical) where design is usually an after thought.

Why you should attend:
-That dude that jumped from SPACE will be there. He’ll jump on you for $5 I think.
-The Black Keys are headlining. Yes, those Black Keys.
-You want to improve your business.

Here’s a neato intro video:

]]>Swiper, no Swiping… Swiper, no….You’re Toooooo Late!http://blogs.adobe.com/strack/2013/02/08/swiper-no-swiping-swiper-no-youre-toooooo-late/
http://blogs.adobe.com/strack/2013/02/08/swiper-no-swiping-swiper-no-youre-toooooo-late/#commentsFri, 08 Feb 2013 15:52:43 +0000http://blogs.adobe.com/strack/?p=127Continue reading →]]>I’ll expand on this post with a specific example in a few days, but I wanted to get a shout out to Vladimir Kharlampidi for his new Swiper library.

It’s a Carousel, it’s an app-store slider, it’s Windows Metro, all in one slick, performant package. It’s new, it’s FREE, and it just works.

It even asks you to Touch it. How lascivious!

There are some bugs and missing API calls ( .index() and .currentSlide() need to be fixed, and you absolutely need to get to the baseSlides when params.loop = true — I’ll prob. submit the pull requests) so if you want to get programmatic you have to do a little bit of landscaping, but it’s competitive with any other HTML slider out there, works 100% with touch, and it’s fast.

]]>http://blogs.adobe.com/strack/2013/02/08/swiper-no-swiping-swiper-no-youre-toooooo-late/feed/3Seeing the trends, and hanging 10 at CEShttp://blogs.adobe.com/strack/2013/01/09/seeing-the-trends-and-hanging-10-at-ces/
http://blogs.adobe.com/strack/2013/01/09/seeing-the-trends-and-hanging-10-at-ces/#commentsThu, 10 Jan 2013 06:53:41 +0000http://blogs.adobe.com/strack/?p=104Continue reading →]]>CES (the Consumer Electronics Show in Las Vegas) is a pretty interesting place. The sheer size of it makes for so many different and interesting situations that one could find something to write about, regardless of the subject matter.

The subject I’d like to talk about is trends. And I don’t mean what trends are finally here and available as products (multi-touch, waterproof electronics, etc). I mean the trends that are coming up just under the radar, right on the horizon.

See, I’ve been coming to CES for 3 years now, and you kind of get this…rhythm going, where, if you look back at years past and see the things that have come to fruition in the current year, you think to yourself “yep, I saw that comin’.” You didn’t really see it coming, or you would have predicted it and blogged about it, and now be saying “see??? I told you so!” No, it’s more like the emerging technologies aren’t a big surprise, because they are, looking back with 20/20 vision, the technologies that make sense.

It’s almost like surfing. For those of that have experienced surfing, you’re out there on the ocean, just behind the line where the waves start to crest, and you’re looking for the right wave to ride. Your body is slowly, calmly moving up and down in rhythm with the passing waves, as you look over your shoulder at the “big” waves coming in, every 7th wave or so. One catches your eye, and you start paddling, hoping it’s the right wave, and you’re in the right position. Sometimes you’ll catch that wave just right, and you’ll have an excellent ride. Other times, you’ll barely miss it, or be too early and end up hurting yourself. (yes, I’m aware that most true surfers don’t have this problem. I’m from a frickin’ land-locked state, so just go with it, mmmk?)

The real point is, the longer you’re in the water – in that specific water – you develop this sort of intuition, and you’ll end up sensing when to go, where to be, and how fast you need to be moving to catch that wave.

Welp, after 3 years at CES, I think I’m finally beginning to see those waves a little ways out. Enough so, that I can comment on them, and not look like an idiot the next year because I said something stupid like “the Notion Ink Adam Tablet is gonna be a HIT!” (I cannot confirm or deny if that is a direct quote from me or not….yes I do have an Adam rotting in my basement.)

That’s not to say there aren’t some fantastic ideas out there that I have no idea why they haven’t taken off (the USB flipper, and the Boogie Board are two worthy examples), and if I were to get emotionally caught up in them, I’d make a foolish prediction. But, there are some things, just-under-the-surface, that wouldn’t surprise me one bit as being the “hot” tech trends for CES 2014.

The one I’d like to mention in this post is: connected Smart TVs.

Yes, there some prototypes and watered-down versions available now, but what I’m talking about is true, legitimate connectivity. True communication between devices, with your TV being one of those devices, and using them in ways that just flat out make sense. Lemme shoot you some examples:

While watching a TV show, a side story line starts to play on your phone (maybe during commercials, or a side plot)

A well-executed choose your own adventure show, where live voting changes the story in real time, or a blu-ray movie has alternate endings or side-plots, based on what you were doing on your phone while you’re watching

A document shows up on your iPad, that you can review and look through, that the characters on a tv show are discussing & passing around a folder with the info in it.

A combination of #2 and #3 above, where what you look at in the “file” affects the plot line (maybe if you don’t find something in the file, neither do the characters in the show)

“throwing” something you’re watching on TV to your tablet / smart phone, so you can keep watching it without interruption in the bathroom (Oh come on, admit it, we all do it!)

“quick search” options, like the IMDB page for the main character, or a wiki page for the show itself on your phone, so you can answer that question “what the heck else is she in?” as you’re watching it.

simultaneous clips / flashbacks on mobile devices, in context with the current show’s conversation.

SMS / other notifications pop up on your TV, similar to Growl on the Mac, if your phone is docked / connected.

TV acts as a very very large 2nd screen for your phone / tablet app (especially during commercials)

I honestly think I could come up with about 50 more, all around the same theme— Instead of the current “trend” of using your phone as a glorified remote control, the TV and the mobile device work together, simply as different outputs for the same program, that lives simultaneously on each system (aka the Nomadic Theory).

And it doesn’t have to be limited to TVs and mobile devices. Your fridge or bathroom or garage door can be interconnected. Can you imagine your TV pausing and / or recording the next 10 minutes, just because it noticed your refrigerator open? or how about your home phone / alarm / lamp going on, exactly at the same moment it happens during a suspense/horror flick? Talk about immersive…

Not all of those things will happen. None of them might happen. But I wouldn’t be surprised at all to see production units, or advanced concepts of more connected, smarter TV interactions at next year’s CES.

I could be completely wrong about this particularly wave on the horizon, but walking the floor and seeing the horizon, it really does feel like we should start paddling for that truly interconnected TV experience.

I’m giving away a couple of copies for free, to celebrate and get the word out about Meteor. If you want to be entered in the contest…

Just post a comment on this thread, and I’ll select a couple at random. I’ll be picking the winners in 2 weeks.

Here’s a link to the book, if you want to give it a preview: http://link.packtpub.com/kDEOeS . It’s also available on Amazon and other fine retailers, I’m sure.

The book is meant for someone with at least some experience developing in JavaScript, and would like to find out what Meteor is all about. I walk through an entire application, and you’ll learn a lot about the major features Meteor has to offer.

No, I’m not working for Meteor in any way. I just really think the technology is solid, and deserves to succeed. Take a look, and tell me what you think!

Strack

——

Alright, I had a random-as-possible contest, and have picked 2 winners. The process went as follows:

I numbered every entry 1-11, and put them into a weighted elimination bracket.

Each “battle” was the best of 3 coin flip, using a 1 euro coin – that means it had to land heads or tails 2 times out of 3 to declare a battle victor.

There was a losers bracket, where the top combatant got placed in the semi-finals

entry #6 got a bye in the first round, just by virtue of being entry #6

entry #1 got a bye in the first round of the losers bracket, because I had to pick someone and they were the first to respond

Now for the play by play—

The first round was dominated by tails. Only one combatant got through with 2-heads flips.

The same tails luck came through in the losers bracket, with only one of the matchups going to a 2-heads.

the 2nd round was dominated by heads. just when I thought the coin was broken, it broke 2-heads in 2 out of 3 battles.

The final round was all heads. #6 may have gotten a bye in the first round, but was on the top part of the battle when the 2-heads rolled.

Just to make sure #6 deserved it (even though he had already won a book) I put him to the test against the other winner, and sure enough, he won that.

Here’s a picture of the bracket(s) and how the flips went. A “top” win means heads prevailed. A “bottom” win means tails did.

Congratulations to #6 and #11: dashouzhang and Tim Poppe!

I am sending your email addresses to my publisher as we speak, and they should be in touch with you shortly.

To all of you that didn’t win, I’m very sorry, but at least you got to see the transparent selection system. Now that I think about it, I should have made a Meteor application to do this, and released the source code… Oh well, next time

Thanks for participating!

Strack

]]>http://blogs.adobe.com/strack/2013/01/09/meteor-contest/feed/14Collection of Data Visualization Toolshttp://blogs.adobe.com/strack/2012/05/11/collection-of-data-visualization-tools/
Fri, 11 May 2012 16:39:20 +0000http://blogs.adobe.com/strack/?p=96Continue reading →]]>This is more a note for me to remember the link than anything, but if you’re interested in learning more about HTML-based (or just regular) Data Visualization, there’s an excellent collection of products condensed into one place:

D3 is as robust as a cake-loving kid with a slow metabolism (shout out to my brother John!), and there’s a great tutorial for D3 from Scott Murray that will get anyone started. (skip/glean through the first couple of tuts if you’re already a JS/CSS junky)

The price really is amazing for all you get. The only real question is, are you familiar enough with all the products to take proper advantage of such a great deal?

I know for me I’ve avoided using Dreamweaver in the past for HTML / Javascript editing. It just seemed too bulky. With DW 6, however, I’ve changed my mind. The add-on features it has make it worth learning and using. Yes, [insert your notepad-like editor of choice] will always be faster for quick editing, but the load up time is now tolerable (not the first time you open it after install– that still sucks), and SO worth it now:

Refactoring / Code completion is top notch and customizable

dynamic parsing of javascript libraries = most comprehensive autocomplete I’ve seen to date

live code actually works now – no more save-put-refresh-firebug tango!

linked files available and editable in one click (not new, but still awesome)

helpers for building apps ala PhoneGap

the “Code View” with a couple of tweaks is the best of both worlds: clean & simple IDE, all the bells and whistles are quickly accessible.

And that’s just Dreamweaver. The new Photoshop and Illustrator are amazing, with about 5 other products all getting honorable mention ribbons.