Scott Hanselman

Good UX in the Wild: A comic book geek returns after twenty years away to a brave new digital world

December 12, '11 Comments [37] Posted in Musings
Sponsored By

UPDATE: Listen to a podcast I did on Comics and the move to Digital Comics for Fanboy Radio.

Ultimate Spider-man in the Comixology AppLike most folks my age, I grew up reading comic books. I remember the first early printings of Teenage Mutant Ninja Turtles in the spring of 1984, long long before they were a big thing, toys, or a movie. Most of my favorite memories of "flashlight reading" (reading under the covers with a flashlight because I was supposed to be sleeping) were with early copies of X-Men or X-Factor.

But as with time, life happens, wife happens, and I moved away from my weekly visit to the comic book store.

Fast forward and over the last four years I've been reading digital books more than ever. Digital reading just totally works for me. I have one Kindle device to read on, which is convenient, but I've also (slowly) learned to trust the cloud. I realize that DRM is evil and that I'm not supposed to trust the cloud, but I do so far. Regardless, I've built up a nice little digital library of Kindle books that I've enjoyed very much.

A year or so ago I discovered that comics had made the leap to digital and I tried subscribing to Marvel Digital Comics Unlimited. It promised a reasonably priced annual plan and 10,000 comics online. Netflix for Comics. Sounds great, right? Sure, but you could only access the comics on a desktop computer. There is no access from portable devices like iPads. This is still the case a year later. What a silly limitation given the fact that a tablet device is tailor-made for comics.

Then I found Comixology. Digital comics done right, in my opinion. You buy them at reasonable prices (there's lots of 99 cents and most are under $3) and they are in your account in the cloud. The client application manages your local storage and you can always bring old comics back.

The most amazing part about Digital Comics is the "Guided View." I've told friends that they should check out comics before and they've said "meh" then I've brought out a reader and showed them how to really appreciate the art and detail with a panel by panel zoomed view and they immediately got it. "Oh, wow. THAT changes things." Here's what it looks like.

Guided View Technology inside the Comixology Reader

It's a brilliant way to make up for a relatively low resolution portable screen. It almost is like turning a standard paper comic book into a motion comic. The panels are smart and you never miss the text. It's optional, to be clear, but GuidedView is really worth checking out.

Comixology is a book reader, and as such has all the usual UX of a standard reader. Swipe forward and backward, but double-tap starts GuidedView. Embedded in the book is the correct direction to move, not only from panel to panel but also within panel. The camera always knows the optimal direction to move and ensures you can always view the text and appreciate the art. Additionally you can choose to show the whole page in full-screen either on enter, or exit of the page. The controls and interface stay completely out of your way. They aren't even visible in the tablet version. Surprisingly the GuidedView interface works extremely well even on a 3.5" phone screen.

There's Desktop, iOS, Windows Phone 7, and Android  versions of the application. It's a nice solid combination storefront and reader. It's quick organized and has a number of features that really showcase why digital comics are so clever. Of course, the experience is optimized to sell comics, but it's also optimized so that that engaged reader can continue reading.

The store interface is rich with metadata. You can view comics not only by the obvious Series, Title, and Author, but also more comic-specific things like Story Arc. Often comics have a multi-issue plot arc and just as we're used to seeing MP3s tagged with compilation metadata, these comics are as well. You can pivot from author to penciler, creator to story to story arc. It also includes collected editions which are the best "price per page" deal going.

For example, in this screenshot I'm at the end of a Compilation (many individual issues in one collected volume) and as I turn the last page I'm offered the choice to purchase and immediately continue reading the next. It's clean and seamless. Once the purchase is made, I can immediately start reading as soon as the first page is downloaded and the rest of the book streams in the background, buffered, similar to a video. I've actually burned through $20 this way reading entire story arcs of Superman and The Walking Dead.

photo 2

Ironically my new digital obsession with comics also has me visiting the local library more often, checking out collected works and large graphic novels like Compendium One of the Walking Dead:

walkingdead

I've always been a big reader and I devour books on my Kindle but I feel like I've rediscovered comics with the convenience of reading them on a tablet. I've found that if you read the right ones and do your research, Comics (Grpahic Novels) are as engrossing and mind-expanding as a traditional novel.

My 5 year old recently discovered comics and we've used them to teach him how to read. There's lots of little kid appropriate books that are an inexpensive and highly engaging way to get kids stoked about reading.

My New Favorite Comics and Graphic Novels

Here's my favorite comics of the last year. Some of these like The Walking Dead, Invincible, Irredeemable and Chew are still continuing stories so I've used both the Comixology application as well as the local library to catch myself up and am now following them monthly. It's been so worth it.

  • The Walking Dead - The definitive Zombie book. The world has ended and the story follows a small town sheriff as he wakes up in the middle of the end of the world, having slept through the entire thing while in a coma. It's now a great TV as well.
  • Y: The Last Man - A story of Yorick Brown who becomes literally the Last Man on Earth after he survives a plague that kills every one with a Y-chromosome on the planet.
  • DMZ - A gripping story of a near-future world that explores what would happen if America, while fighting wars overseas, neglected the home front and literally lost control of Manhattan. New York itself becomes a DMZ.
  • Elephantmen - "In the year 2162, a madman named Kazushi Nikken creates giant hybrids of humans and animals - elephants, rhinos, camels, giraffes - and brainwashes them into an army of fearless killers. But the United Nations liberates the 'elephantmen' and integrates them into society."
  • Invincible - Possibly the greatest superhero comic ever. It starts largely derivative but quickly expands to an homage to every superhero story ever. A young man is the son of the world's most beloved superhero and one day he develops powers. He eventually learns the story behind his fathers powers and the story moves to other worlds.
  • Irredeemable - What happens when the greatest super hero the world has ever known finally cracks? If a Superman-type turned into the world's greatest villain and started killing millions, how could we stop him?
  • Watchmen - Possibly one of the great comics of the 80s, if not one of the greatest graphic novels ever. A complex and clever a story as any novel.
  • Chew -  "Tony Chu is a detective with a secret. A weird secret. Tony Chu is Cibopathic, which means he gets psychic impressions from whatever he eats. It also means he's a hell of a detective, as long as he doesn't mind nibbling on the corpse of a murder victim to figure out whodunit, and why." Irreverent and disgusting but always gripping.

What are you favorites comics, Dear Reader? Are you enjoying Comics' move to digital as much as I?


Sponsor: My thanks to DevExpress for sponsoring this week's ComputerZen feed. Introducing DXv2 – Welcome to the next generation of developer tools from DevExpress! Explore what’s new in the latest release.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

VIDEO: The Art of Speaking - with Scott Hanselman

December 9, '11 Comments [25] Posted in Screencasts | Speaking
Sponsored By

The Art of Speaking with Scott HanselmanIt all started in high school with Musical Theatre. Then it continued when I was teaching as an Adjunct Professor at a State University. I like talking to people. Now I've been doing it for 20 years (25 if you count "My Fair Lady").

While I've had an opportunity to share some tips and tricks for speaking over the years on my blog, I've never really felt the information was organized. I've presented on presenting, but never assembled courseware. I've written many posts on the subject, but never created an e-book. The information is here and there, but not well, ahem, presented.

Then Rob Conery came to me with the idea of a polished 1 hour video where he asks me to speak on an unfamiliar topic, I research and build the talk, then present on the spot. All filmed, all real, all legit. It was too good an idea to pass up. Complete with interviews, examples, demos, how I design story arc, my thought process - applied.

We did it.

I'm sincerely thrilled to share the results with you today. A lot of hard work late at night, hours of thought, more hours of editing, and a little TekPub magic later and we can happily bring you my first TekPub video (UPDATE: Now Pluralsight) "The Art of Speaking - with Scott Hanselman."

Perhaps you've given technical speeches at work and are considering a local user group. Maybe you've spoken at code camps and want to go national or international. Or, perhaps you'd just like to be more comfortable talking to the folks at your office and presenting to the boss.

It's included with your TekPub annual or monthly subscription or you can just buy the one video. It's packed with information and it's got that polish that TekPub is known for. Rob and I feel that this one hour documentary style video is a great introduction into the minds of a technical speaker with not only experience, but passion for the topic.

I hope you enjoy it as much as we enjoyed making it.

Scott Hanselman

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

You probably don't need a Twitter client, just learn the hotkeys in New Twitter

December 8, '11 Comments [12] Posted in Blogging | Tools
Sponsored By

It's probably not unfair to call me a Twitter Power User. I use it a lot, it's my favorite Social Networking site and I've written a number of reasonably popular articles on the topic.

I've used literally dozens of Twitter clients across almost every platform. Mac, iOS, Windows Phone, Android, and Windows. My current favorite is MetroTwit for Windows.

However, even though I've got a dozen Twitter clients installed, I keep coming back to the Twitter website itself. And for one reason: HotKeys. There aren't enough sites that use hotkeys in their web applications. Gmail and Remember the Milk come to mind as the best examples.

In Twitter you can press ? to get a Keyboard shortcuts popup. Take a few minutes and just try to learn four or five of them. I realize it's hard to hold all these in your head at once. These hotkeys have always been available since the first "New Twitter" but since "New New Twitter came out today, I though I share these little known features.

All the Twitter Keyboard Shortcuts, unfortunately as a picture. Press ? in Twitter to pop these up.

Some are easy, like F for Favorite and R for reply. These are context-aware hotkeys, though. That means they apply to the currently selected Tweet.

Replying to a Tweet with Web Hotkeys

Open up your Twitter and hit J or K. See how J and K move you up and down and select tweets? In this picture, you can see that Ken Jeong's tweet is currently selected.

Navigating the timeline in NewTwitter

I can reply to it at this point by pressing R at this point.

Replying to a Tweet

I can then hit Tab and Space to move to the Tweet button and press it. This is similar to Gmail.

So the process is, J and K to move up and down, R to reply, type your reply, then Tab, then Space. You'll be surprised at how fast you can get at this with a little practice.

Refreshing your Timeline

After replying to a few tweets, I might want to refresh my timeline and get new tweets. That's just the . (period) key to refresh and move to the top of the timeline.

Now the fun stuff.

Moving to other views, like Mentions

Some of the hotkeys are "chords" that are two keystrokes. They are really intuitive, though. G then H takes you home. That's pressing G, then pressing H. Don't press them at the same time.

My favorite three are:

  • G H - Go to home
  • G R - Go to replies (Mentions)
  • G M - Go to DMs (Direct Messages)

Another great one is G U. That's Go To User, then start typing their name, then hit Enter.

More Advanced Hotkeys

A few more advanced ones now that you've got these down solid are:

  • / for search

That's the same as ? for the hotkeys help, except without the Shift. Just / and your search time, along with Enter.

  • Enter to open a Tweet Details

This one took me a second to understand. If I have a Tweet selected, like after using J or K to move around my timeline, I can hit Enter to see the current Tweet's details, like Ken's here:

A tweet with expanded details

Now I can see the Retweets, when it happened, who Retweeted it, etc.

A tweet's conversation view

The confusing part is that this tweet details will stay open in my timeline. I can have many Tweets "open" at once, and then use the L hotkey to collapse them all. It's a similar metaphor to Gmail's Expand/Collapse except it's all done on one screen.

When you are looking at a Tweet that is part of a larger conversation and you expand it with Enter, you'll be able to see Replies to that tweet in both directions, past and feature. For example, note this exchange with @VitaminJeff. You read top to bottom. Selected one of his tweets with the keyboard and hit Enter.

Above it shows the "reply chain" that started when he asked if I got my new laptop yet.

A tweet's conversation view

Twitter also found newer tweets than the original one I selected when we were being silly about our new words of the day.

What's nice about this is that Twitter is assembling the conversation neatly, again both past and future tweets, making it feel more like a conversation and less like a mess of tweets.

Spend a little time with the Twitter Website and really learn the hotkeys and I think you'll find it harder to move back to your 3rd party Twitter client. Even better, perhaps this will put pressure on the 3rd party Twitter client ecosystem to standardize on these same hotkeys. It would certainly lower the barrier to entry when trying out a new client.

See you on Twitter! @shanselman

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Good UX in the Wild: Dropbox's attention to detail on their download page

December 7, '11 Comments [29] Posted in Musings | Tools
Sponsored By

Sometimes good UX is about being clever. Sometimes it's to make the user happy or smile. However, when the success of your product depends on new, possibly inexperienced users successfully downloading and installing it, good UX is the difference between success and failure.

I love what Dropbox has done here. I've noticed it for years and mentioned it in talks and to friends but I wanted to call it out here because it's so thoughtful.

When you go to download Dropbox, here's what you see on Internet Explorer. Note they've used a three step tiny screenshot sequence. Each of them isn't a real screenshot, but rather "evocative" of the thing an IE user would see. For example, the second User Access Control dialog isn't real, but it's close enough that it makes the point while still fitting into width of the page cleanly. Their Welcome to Dropbox Setup screenshot is the same way, distilling the essence of  what's coming while keeping the design consistent.

See below how the first screenshot shows what's coming and looks enough like the actual Save As experience that pops up seconds later as to guide the user to the next step.

Dropbox - Windows Internet Explorer

Here's the attention to detail part. Here's what a Chrome user sees when downloading Dropbox. They see a Chrome specific download screenshot.

Dropbox - Google Chrome

Here's the Dropbox download page when using Safari on a Mac:

Dropbox - Safari on a Mac

In Firefox for Windows, they see a Firefox Save File dialog along with a different second step. In the second step Dropbox takes a chance and doesn't show the User Access Control screenshot, and is instead more concerned that the user will download the file but not run it. I've had this happen myself with Firefox a few times, where things get downloaded then forgotten.

Dropbox - Mozilla Firefox

Techies forget how something as trivial as downloading and running a file can be a huge deal for the average user. What Dropbox has done here is a nice touch over the standard big Download button. To accomplish something like this, not only did they need the initial idea but they needed to the will to do it. They thought it'd be useful and they made it happen. What can we do in our organizations, Dear Reader, to sell our innovated ideas up the management chain and make the happen? What kinds of things stand in our way? What do we tell ourselves? That's too hard, that's too involved, that's too difficult to test, and the list goes on.

We need to continue to push ourselves and our work groups to implement ideas that we know are right. We need to advocate for the Customer and always try to see things from their experience. I don't know anyone at Dropbox but I think it's a fair guess that not only did they have the will to implement this friendly download feature, but they also knew it was the right kind of attention to detail that their customers needed. What a nice, almost subliminal way to kick off your relationship with your users than a subtly customized download page.

Have you done something similar, Dear Reader? Share in the comments.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

New ASP.NET website launched

December 2, '11 Comments [39] Posted in ASP.NET | ASP.NET MVC | Microsoft | MSDN
Sponsored By

A few weeks ago we introduced a beta of a freshly designed http://asp.net website. Today we launched it. Jon, myself, and the team that manages the site took lots of your feedback (lots from the comments of the Beta Blog Post) and did our best to incorporate as much as we could. This is just the start, and we've got lots of plans for the future including responsive design, more text content, localization, more HTML 5, HD Video, closed captioning and lots more.

It is a big site with thousands and thousands of pages. However, a lot of those pages were hard to find. We're continuing to try to get folks what they need in fewer clicks.

There's new content for people getting started, including "choosing a technology" videos, the Big Green Button remains with a new download video as well as quick download links for the stuff you're always searching for.

Each top level page (Web Pages, Web Forms, MVC) has a 5 minute app building video and lots more getting stated content. You asked for more text tutorials and we heard you. In-depth tutorials on deployment, working with the Entity Framework, suggested open source projects to check out for each, books, samples, and more. And, you can always find out about the next version of ASP.NET at http://asp.net/vnext.

The new ASP.NET Navigation

The home page header is smaller, per your feedback, making room for more Daily Community Spotlight content as well as pinned announcements. There's a cleaned up Community page with easy to access RSS feeds, a quick navigator and lots more fresh community content packed onto the page. Tutorials are more organized like a living book now and are easier to follow. Tutorials can now appear as multi-part tutorials with better navigation. Forums got a nice facelift, as did the Wiki, and Weblogs. Each technology also includes a great free video course from Pluralsight. Feedback is always appreciated.

Example Nerddinner Tutorial with Multi-part article navigation at right

Videos are larger, video downloads are simpler and links with table of contents are everywhere. All those videos you never could find actually do exist.

New video page includes more information and makes better use of space

The site is still powered by the Open Source CMS Umbraco and we're very happy with it. Jon Galloway worked tirelessly on this new site launch along with TerriM, ScottHu, SridharM, Samir and lots of other folks smarter than I. Jon digs into the new layout and "information architecture" over on his blog so check that out for more details on our thinking.

yslow on aspnetAlso as a part of this process we've gotten the http://facebook.com/aspnet and http://twitter.com/aspnet accounts up and firing on all cylinders. Join us on your favorite social network or subscribe in your favorite reader and we''ll make sure all the fresh Jon Galloway-curated spotlight content is delivered to you as we get it.

I'm also pretty proud of how we're doing in YSlow. The perf on the site is great. The home page is under 100 lines of HTML5, the markup is clean, and we're aiming for similar results in other parts of the site. Soon we'll make the ASP.NET site's personal CDN cookieless and have straight "A's" on YSlow, which is no small feat.

We realize that the #1 piece of feedback from you all is that you don't like the ads. At this point, that's out of my hands, but I'm working with the team on providing less distracting and more reasonably designed ads. Most of the ads are for hosting or controls, and the vendors that get ads are happy with being on the site. We're also working with the bosses on how to ensure that the site is funded appropriately. You don't have to tell me...I get it. Feel free to vote on the ASP.NET User Voice site.

It's never finished, but it's getting there. We're really happy with the improved performance, better navigation, fresher and more relevant content. We've got more in store, so stay tuned.

Hope you like it.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.