Design Sense : ASP.NET New Website Design

A few days back I stumbled upon Scott Hanselman's blog post about the availability of new Beta ASP.NET website. I hated ASP.NET website for a long time and even complained a bit earlier. My biggest complaint was about the lack of RSS Feeds with Video files as enclosures. There is no easy way to get updates on new videos and watch and/or download from any RSS feed reader. (Hated it so much that during one of our training classes, I built a web crawler to create RSS Feeds with enclosures and in a later session, built a web application that will let anybody create a RSS feed from resources any where on the web).  And then, I haven't visited the site a for a long time. So, I was eager to check it out and did it at last.

 

On a related note, there were many properties, particularly around Microsoft, did not offer such RSS feeds with enclosures. I complained about MIX and PDC 2010 some time back. I think they offered RSS Feeds later on for some of those. I was particularly taken aback when I saw this note on MIX site.

If you’d like to download all of the keynote and session content, download a recent build of cURL (~250K), and extract it to your folder-of-choice. Then, download MIX10Downloader.zip (1.39KB) and extract the MIX10Downloader.bat file to the same folder. From a command prompt, start MIX10Downloader by passing it one of the following parameters: WMVHIGH, WMV, MP4, PPTX. Then wait. For files that aren’t available, cURL will download a file that is around 1,245 bytes in size (if you change the extension to .htm and open it, you’ll see that the file is simply an HTML "not found" error page).

To rename the files, first, download MIX10Renamer.zip (4.09KB). Then, extract the MIX10Renamer.bat file to the folder that contains your downloaded files, and from a command prompt, type MIX10Renamer WMV to rename all of the .WMV files to the full session title. By changing the parameter, you can also rename your PPTX and MP4 files.

Anyways, here is what I thought when I looked around the new (still beta) asp.net website. I am not a designer and currently learning about interaction design on web applications. So take my comments with a pinch of salt.

As highlighted in Scott's blog, information has been re-positioned quite wonderfully in the 'Learn' pages of the site. Oh, no, you will not find a link to 'Learn' on the front page. Click on any topic links on the top (say Web Forms). Nice and clean grouping of content organization into tabs, chapter menu and quite a clean list. Pluralsight videos have been featured as 'Essentials', rightly so.

Just one quirk though. I kept clicking on each of those tabs to view the content in each section. But once I hit 'Forum', suddenly I felt like totally lost the context.  No more header, no more tabs. It totally feels out of place. The only way, you can comeback to context was to use the back button. It should have been a link rather than a tab. Semantically, I expect the content to be opened within the tab, preserving the tab position in the tab group.

Community Page is also organized quite cleanly with variety of content from the community eco system. Floating navigation bar at the left deserves to be mentioned too.

Other than that, I did not find any thing impressive. But here are some more thoughts on how it could be done better.

Front page is Wasted

Copywriting is quite essential for any web application. If somebody new visits the page, there is not much to take away from the page. Leave alone, impress the user to explore further. The front page totally fails in this aspect. There is no conversation started and no conversation to continue. This is the least expected of a Web development community.

 

If somebody visits the front page, the first question that should have been answered is what is ASP.NET is all about and why it is worth exploring.

This is what ASP.NET site looks like. Visit the page and Try to answer the question, What is ASP.NET?

Compare it to RoR (Ruby on Rails). View the following snapshot or Visit the page and try to answer what is RoR?

Or Compare it to jQuery. View the snapshot or visit the page and then try to answer what is jQuery?

If you are not convinced, visit the front page of ASP.NET site, visit Ruby On Rails Front page and Visit the jQuery front page. Quite obvious. Isn't it?

I think the front page is totally wasted. I do expect a much seriously higher bounce rate from the top page than any other page.

Why Community Spotlight so important wide, front and loud on the front page? And two large banner ads to go with it? I don't understand why Microsoft has to resort to dumping so many ads on the community site.

A little test of Usability and Information

Have a friend of yours that doesn't know anything about ASP.NET and visit the site and see what he/she can say about ASP.NET. Try the same with jQuery, Ruby on Rails or any other site for that matter and see what they can gather. I did. I tried with two friends who have been working in a Telecom industry for about 10 years and haven't heard of any of these : ASP.NET, RoR and jQuery.  Now they are obsessed with RoR and jQuery in that order, but couldn't scratch the surface yet when it comes to ASP.NET.

And lastly, ASP.NET still doesn't seem to have RSS Feeds with enclosures. It seems, they have lot more interest in eye balls rather and still care so much about advertisers.

Design Sense : Making Sense of Error Messages

No matter, how well we design our Software Systems, exceptions are bound to happen. Some times, due to our internal faults arising from bad or incomplete design like not handling errors or certain uncommon conditions. And some times, due to events that are totally out of our control. What makes our application exceptional is how we handle those exceptions and keep the conversations going. 

Here is an example of an Error Message on Microsoft Xbox that needs serious re-work from Microsoft.  If you are wondering it must be a mistake as it doesn’t even look like an error message allow me to explain.

Customers need XBOX Live Gold level subscription to access Netflix.  I did have a Gold Subscription and I have been happily watching movies streamed from Netflix for a long time. Now and then, XBOX stops the movie and comes to this particular screen after a couple of beeps asking me to “Upgrade to Gold or Sign in”  doesn’t make any sense at all.

After a couple of instances, I figured out that this screen pops up when connection to the internet is lost or down. I confirmed it by shutting down my wireless router a couple of times.

Error messages, particularly those that are displayed to end customers, must be sensible, contextual and make sense. If possible, prompt users to take alternate actions that may provide a temporary work around.  In this particular case, if internet connection is lost, it should just say that it can’t connect to internet rather than I don’t have the right subscription.  Can also make suggestions to end users on how they can make sure access to Internet is working properly.  If internet connectivity is just fine but Netflix servers are down (like it happened last month), it can nicely share the same that it can not contact Netflix servers, but connectivity is just fine. 

Take a look at how you are handling exceptions like this and review whether those error messages are making sense, keeping your customers informed and most importantly keep the conversations going. 

Flipboard : Tweets to Stunning Magazines On The Fly

What an amazing concept and implementation. Probably the BEST application on iPad. The Flipboard application on the iPad can create a stunning and truly delightful magazine from any Twitter feed (or Facebook for that matter).   It looks at a tweet, access the URL and compose the original article in a beautiful magazine format. It also picks up images from the article and arranges them in various magazine formats.   If the tweet is not referring to an URL, then it nicely composes the tweet like a quote in a magazine.

A little intro to the  Flipboard for iPad.

Introduction to Flipboard for iPad

Take a look at a couple of awesome screenshots of the Magazine created from Twitter feed of @inspions.

Silverlight Apps : “It’s Everybody’s Business” Show

This is pretty cool online show application built  on Silverlight technologies. Silverlight streaming video, excellent typography, really cool art work,  slick animations and tons of relevant content synchronized with the video. 

http://everybodysbusiness.msn.com/ 

Content all spread out nicely.

Designs Apart : Groupon's Unsubscribe Screen

Groupon's Unsubscribe screen asks you to ‘Punish’ a team member that recommended Email Subscriptions whenever you unsubscribe to those Email notifications.

Nice, personal, playful and bring you back to interacting with their site, even after you decided to go away. Loved it.

Windows Live Writer Goes Office Style

Just noticed that with Windows Live Essentials 2011 upgrade, Windows Live Writer also gets Ribbon style interface that became so famous and productive with MS Office applications.

If you have been using WLW for a while but haven’t used any MS Office applications that feature ribbon style interface, you are in for a big surprise and little bit of confusion. 

If you are looking for all your Picture effects, they are split into two different sections: borders and effects. Click on Image to make these Picture tools/Format section visible.

Amazon Buy-Back Offer Pricing

If you haven't noticed this "Do The Math" widget already, Amazon appears to be offering a Textbook Buyback store where you can sell your books back to Amazon. Amazon is including the price at which a particular book can be bought back and showing the effective price you may have to pay if you just want to read it once and return to the store.

Quite a saver.

Its not about Technology. Its about Elegant Solutions.

“Mention innovation, and people immediately think, technology. The truth is that business innovation is about value, not gadgetry. But the pace of technological progress sweeps us off our feet and we get all caught up in the gizmo, losing sight of the why behind the what. People don’t want products and services. They want solutions to problems. That’s value. And when it come to solutions, simple is better. Elegant is better still.

Great innovation requires understanding and appreciating the concept of elegance as it relates to solving important problems. Oliver Wendell Holmes once said: I would not give a fig for the simplicity this side of complexity, but I would give my life for the  simplicity on the other side of complexity.

Elegance is the simplicity found on the far side of complexity. An elegant solution is one in which the optimal outcome is achieved with the minimal expenditure of effort and expense.

Elegant solutions embrace an overarching philosophy of doing far more with much less, a notion that has become synonymous with Toyota and is present to this day in all of their operations, from design and engineering to manufacturing and distribution to sales and marketing.

An elegant solution is recognized by its juxtaposition of simplicity and power. The most challenging games have the fewest rules, as do the most dynamic organizations. The most memorable films have a simple message with complex meaning, touching a universal chord while allowing multiple interpretations.

An elegant solution is quite often a single tiny aha! idea that changes everything.  Finally, elegant solutions aren’t obvious, except, of course, in retrospect.”

Excerpt from Elegant Solutions: Breakthrough Thinking the Toyota Way

Hotmail is Better/Faster in Safari on Mac ??

Just watched Velocity 2010: Aladdin Nassar, "Worldwide Inventory of Last-mile Bandwidths & Network Latencies" on Active Player.

Source : Velocity 2010: Aladdin Nassar, "Worldwide Inventory of Last-mile Bandwidths & Network Latencies" from O'Reilly Velocity Conference ( Feed ) via Active Player

It is totally surprising to see that Hotmail is actually better/faster in Safari browser on the Mac than any browser/OS.

( Source : PPT )

Velocity 2010: Urs Holzle : How fast Web Can be ?

Just watched Velocity 2010: Urs Holzle on Active Player. It is surprising to see that the average load time of a web page is 4.9 seconds.

Urs Holzle (Google)

Source : Velocity 2010: Urs Holzle from O'Reilly Velocity Conference ( Feed ) via Active Player

Quote : Internet is a medium based on interruption

Google may be helping us to find content faster and better. But Google is definitely changing the way we learn, think, organize and work.

Internet is a medium based on interruption — and it's changing the way people read and process information. We've come to associate the acquisition of wisdom with deep reading and solitary concentration, and there's not much of that to be found online.

-- Nicholas Carr

( Read/Listen to NPR Interview with Nicholas Carr here  Or Download MP3 )

You can read the first article that voiced the concern and later grew to a book called “The Shallows” here: “Is Google Making Us Stupid?”.

The Productivity Paradox

Little experiment that is worth trying, if you haven’t yet : Try blocking access to Internet for your Software development team and see how it would impact the overall productivity and quality of the team.

Lifecycle of a Wireframe

Just watched Lifecycle of a Wireframe by Nick Finck on Active Player. Wonderful session.

Dive deep into the process used to create wireframes, a key deliverable for user experience designers. Hear about the principles that guide this process, how to create great wireframes (all the way down to the nitty-gritty page or screen level), and how to identify and deliver solutions that meet your clients' business goals and solve their problems. Walk away with a better understanding of what delivering awesome wireframes entails - from methodology, to process, to delivery - and how to do it yourself. If you're an information architect, interaction designer, visual designer, or regular old user experience-curious creature: this one's for you.

Source : Lifecycle of a Wireframe from MIX 2010 ( Feed ) via Active Player

While we can just start with a white paper and pencil to get started with wire-frames, We could also create great wireframes right in MS Power Point itself. You may download this  MS Power Point template for creating wonderful wireframes in Power Point.

Twitter : Short URLs, but Readable

While posting through TweetButton, Twitter translates your URL to a short URL, say in this example, http://active-player.inspions.com to http://t.co/0toCfbl.  This is all but normal.

But a nice improvement Twitter did was instead of just posting the short URL in the tweet, it posts a readable URL while still linking to the short URL.

It totally cool improvement and makes tweets more readable.

Compare it with this following tweet of this very post, but using Google’s short URL.

Design Sense : Youtube and highly trained monkeys

Look at this funny error displayed by Youtube when some thing went wrong on the servers. Is Google referring to its developers as monkeys? or am I missing some joke?

Active Learning : The Four Generations Of Active Player

It was so thrilling to see how Active Player went through 4 major iterations in the last 6 years, since I built the first draft version back in August of 2004. As far as I can remember, so far the application has been used by about 1400 users to learn from various videos and webcasts. I am quite excited to see how many more will find it useful, now that the application is open to all.

I would like to share, what motivated me to develop this kind of application in the first place in a separate post. Here is a rundown on the memory lane and various features (as far as I could recollect) included in each of those versions.

First Generation : August of 2004

• Built and runs on .NET 1.1
• Opens Media files that are stored locally on a computer or on the internet.
• Once the file is loaded, it will read any information about Chapters (markers) in the file and display in Media Chapters section.
• User can add his/her own bookmarks on the media file that will show up in the bottom half of the sidebar.
• Bookmarks are stored in an xml file, named after the media file name and stored in the same location. So when you open a media file, it automatically picks up the bookmarks file as well.
• Optionally, user can choose a specific bookmark file, like a centralized file with all bookmarks in one place to quickly move between different video files.
• To share, user just need to email the Bookmarks file to a friend/colleague.

Second Generation  April 2006

• Supports everything as in first generation.
• Re-organized the visual layout and built on .NET 2.0 with VS2005
• Side bar now has tabbed panels, with each tab occupy the sidebar space fully.
• Introduced Clips, where a portion of the video can be marked for replay later on.
• Also introduced facility to play “All Clips” together. Great for students, as it would help to quickly revisit all those important portions from different videos.
• No longer support one bookmark file for each media file, but forces a centralized and default bookmark file. So user never have to specify a bookmark file.
• User can open a different bookmark file if wants to. For instance, when a friend shares his/her bookmarks file, a user can open that bookmark file and access all those bookmarks and clips.

A web-based version of Active Player Feb, 2007

Created a web based Active Player for creating bookmarks and clips on MP3 files in Feb 2007 and presented it in Democamp Dallas in Feb, 2007. Later this application has been enhanced to support video files by embedding various video players in the browser.  This web application was discontinued later in the year due to little change of priorities.

Started working on a web based Active Player a couple of weeks back and will release some time in November, 2010.

Here is a snapshot of the MP3 Active Player from the democamp. You can see more pictures here.

Third Generation, May 2009

• Started using Click Once Deployment.
• The application has been redesigned for visual layout and built on .NET 3.5.
• Included support for RSS Feed subscriptions as well Subscription from custom Feeds from the Training classroom website (INSPIONS University).
• Storage has been upgraded from XML file to SQL Server Compact Edition. But the data structures are kept intact from XML file version for backward compatibility.
• Added concept of Collections, where Media files can be organized into groups/collections.
• Support downloading media files from RSS Subscriptions and files directly added.
• Separate tabs for Bookmarks and Clips.

Latest and the 4th Generation, July/Aug 2010

• Quite significant changes in the software architecture itself.
• Included support to embed Apple Quicktime along with Microsoft Windows Media Player, so abstracted the MediaPlayer code to generic interface and built a repository for media players to be selected based on file format.
• All feed fetching, syncing and downloading operations moved to separate background worker threads.
• Completely redesigned the database schema and internal data structures and now using Entity Models instead of typed datasets from earlier versions.
• Removed support for custom XML formats and streamlined all Collections to RSS Feed specification. So every thing will be now an RSS Feed/collection.
• Visual layout has been modified for much better cleaner and slim look and gives full space to the video being played.
• Tab bars have been split and pushed to the sides, keeping in view the wide screen monitors that are shorter but wider in nature.
• Bookmarks/Clips have been combined in to one tree view.
• Display Bookmarks/Clips of the current media file opened top in the view and rest of the files below.
• On minimizing or closing, application now just minimizes to the tray.
• Restricted to single instance of the application running at any point.
• Now need explicit but FREE Activation to keep track of some stats from each individual user as well as to build a community of users for better sharing and collaboration.
• Social aspects like pushing user updates and bookmarks/clips to social networking websites are coming soon.

So, here we are with the latest and 4th generation of the Application. Now that, the application is open to all, I hope many more people may find it useful for learning online.

Design Sense : File Size Of (RSS Feed) Media Enclosure on iPhone

If you open a RSS Feed URL in Safari browser on the iPhone, it redirects you to a RSS Reader hosted at http://reader.mac.com that aptly displays the Feed in a nice readable format on the iPhone. If the RSS feed contains Media enclosures (like Video, podcasts etc),  the feed reader application quite conveniently displays (what appears to be) amount of time it may take to download that file on your iPhone.

Look at a sample RSS Feed item below opened on the iPhone from an RSS Feed that I have prepared, contains a video introducing ASP.NET by Scott Hanselman.

I first thought, the time mentioned is duration of the video file enclosed in the feed. But the duration of the video enclosed in this particular example is actually 00:03:54, so it must be download time. Its a valuable information to have on your mobile device as it would help you to decide whether to go ahead and watch/listen to the media file or not. 

To come up with an estimate of download time, the reader application must be enquiring about the file size in real time.  This must be done by requesting HTTP Headers for the download file and use the content-length in response.  The application must also be checking the bandwidth of your current connection. For instance, if the iPhone is connected on Wi-Fi, I observed that the time is lower than the value displayed when iPhone is on 2G network.

Nice little extra work on the server and is quite valuable on mobiles.

Similar information is not displayed if you open the feed in Safari browser on the desktop though.

Application developers, take a note. A little extra work on your side could save a day for your users.

Basics of Marketing A Startup : Mahesh Murthy @ Proto.in

One of the most intriguing presentations I have ever watched on how to market a startup.

Key take-a-ways (in my own words):

• Don’t even bother, if you don’t have an insanely great product.
• Trend means end. Never follow the trend, but try to create your own trend.
• Charge early. Charge a lot. Your price could be your best marketing strategy.
• Spend as little money on advertising. Instead spend on developing an insanely great product. The product will speak for itself and your customers will advertise for you. You can never have enough budget to promote a crappy product.
• If you ever have to give out your product free, build a beautiful and amazing UI to give a much better experience to customer.

I must admit and warn you, if you ever watch this video or read about the presentation either on this blog or elsewhere, take the advice with a pinch of salt. While appear sound (and anecdotal and may have worked for him and his team), the advice is quite narrow and may not work for you.

For instance about advertisements. In his own words, if you are advertising means you have a crappy product. He presented Google and Yahoo on one side with great products and no advertisements while Coke and Pepsi on the other hand that spend a lot on advertisements to promote crappy beverages.  This is a twisted comparison to start with as you can clearly see he is comparing apples and oranges.

The Apple Test

Let us put Apple to test on this theory. Apple is known as one of the most innovative companies with truly insanely great products even before the pervasive iPod and iPhone. And Apple’s ads for iPod, iPhone and Macs are some of the best and most elegant advertisements I have ever seen. And fact of the matter is Apple advertises quite significantly about its products. Does this mean Apple has crappy products? No way!

Your money spent on marketing is as important as building a great product. In many cases, marketing is lot more important than the product itself. In simple words, Marketing takes you to the customer. If your product is better than a competitive product known to that customer, this is very important, known to that customer, you win the customer. Or you loose. So, first step to get to a customer is much more important than proving to the customer that your product is the best product. What is the point of proving you have the best product, if nobody know about product.

And its quite unrealistic to rely on your existing customers to virally spread the greatness of your product. It takes lot of time and if your product is particularly a niche product, time is quite an essence. So you must reach to as many customers as possible in the shortest amount of time through advertisements. And leverage all social media to facilitate spreading the message.

I agree with another key message, charge early and charge a lot. Based on my little experience and learning, I would also add, charge as often as possible.

There are lots of sound bytes in his presentation that may help some  startups to tone their messages. But most important lesson to take away from this presentation is to break free from trends. Even if that trend is his own anecdotal experience about advertising.

Don’t forget to watch it. A strong opinion is always a lot better, as it would consolidate your own understanding of the topic. And this presentation has lots of them. One of the finest.

(Originally posted on 23rd April, 2009)

Google Fonts : Free And Designer Fonts For The Web

Thanks to Google, now any web developer can have stylish designer Fonts on their web pages. As simple as including a <link> tag to a CSS file hosted on Google’s servers.

For a long time, the web has lagged print and even other electronic media in typographic sophistication. To enjoy the visual richness of diverse fonts, webmasters have resorted to workarounds such as baking text into images. Thanks to browser support for web fonts, this is rapidly changing. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed.

Google has been working with a number of talented font designers to produce a varied collection of high quality open source fonts for the Google Font Directory. With the Google Font API, using these fonts on your web page is almost as easy as using the standard set of so-called “web-safe” fonts that come installed on most computers.

The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers

Apple Safari Reader Makes It Easy To Read Content on Web

Apple Safari version 5 makes it easy on your eyes to read content on websites. It smartly figures out what is real content and just shows up that. And you can easily resize content and even print the content. Printing a webpage just with content, makes it my best feature of all. Its sure the best way to read content on the web.

The best way to read on the web.
Safari Reader instantly banishes those blinking and flashing ads that distract you from your online articles. Say you’re browsing your favorite news site. Safari can tell if you’re on a web page with an article. Simply click the Reader icon in the Smart Address Field, and the article — every page of it — instantly appears in a continuous, clutter-free view. Email, print, or zoom with a click using convenient onscreen controls. And if you change the size of the text, Safari remembers it the next time you view an article in Safari Reader. - Apple

Design Sense : Critical Elements of Landing Pages

We spend a significant amount of time and money in marketing a web site to reach the target audience. We take extra care in designing our marketing brochures, advertisements and campaigns, that translate our ideas, products and solutions to customers.

But what about the website landing page, the first page that customer or visitor get to see when he/she visits the web site. First impression is the best impression. Do you think your website makes the same first impression you wish it would? Does your website speak the same language? Does your website can keep the conversation going?

Here is a wonderful video by Gregg Blanchard explaining three critical elements of Website landing pages.

If you think first impression is important, landing Page is the ‘first impression’ of your website. So make sure, you make your first impression the best impression.

Previously on Design Sense :

• How to Keep Conversations Going, In The Face Of Exceptions
• Avoiding Unintended Expectations In Writing