jump to navigation

The most important rule for managing your Agile project team’s velocity [VIDEO] May 1, 2013

Posted by HubTechInsider in Agile Software Development, Product Management, Project Management.
Tags: , , , , , ,
add a comment

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies, software developmentAgile project managementmanaging software teams, designing web-based business applications, running successful software development projectsecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. I have been working in the software engineering and ecommerce industries for over fifteen years. My interests include computers, electronics, robotics and programmable microcontrollers, and I am an avid outdoorsman and guitar player. You can connect with me on LinkedIn, follow me on Twitter, follow me on Quora, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurshipecommercetelecommunications and software development, I’m a PMO Director, a serial entrepreneur and the co-founder of several ecommerce and web-based software startups, the latest of which is Tshirtnow.net.

More Articles From Boston’s Hub Tech Insider:

How to optimize your web based software application for the mobile web August 7, 2011

Posted by HubTechInsider in Mobile Software Applications, Product Management, Project Management.
Tags: , , , , , , , , , , , , , , ,
1 comment so far
Image representing iPhone as depicted in Crunc...

Image via CrunchBase

The mobile web is where the action is in 2011.  We have all seen the polls and the statistics: people are spending more and more time accessing the web through their mobile smartphones and mobile tablet computers. The mobile Web grew 110 percent in the U.S. last year and 148 percent worldwide as measured by growth in pageviews.

Including devices such as the Kindle, the iPhone and other smartphones, web-enabled tablets, GPS systems, video games and wireless home appliances, the growth of the mobile web has been exponential — and we’re still just at the beginning of this cycle. Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015. The proliferation of better devices and the availability of better data coverage are two trends driving growth; having better services and smaller, cheaper devices has led to a huge explosion in mobile technology that far outpaces the growth of any other computing cycle.

Global 3G penetration is expected to hit 21% this year. In Japan, where the U.S. looks to find its mobile roadmap for the future, 96% of mobile subscribers already have 3G coverage. In Western Europe, the penetration is around 54%, just slightly above 46% in the U.S. In developing and/or economically depressed areas, including the Middle East, Africa, parts of Asia, Eastern Europe and South America, 3G penetration is still in the single digits. 3G access is a key point in the success of the mobile web, providing very usable surfing speeds for mobile web usage.

In addition, mobile e-commerce is ramping up faster than online e-commerce, now making up 4% of total retail sales. In certain categories, such as computers, consumer electronics, music, movies, tickets, video games and books, online sales account for between 45% and 20% of the total retail market. Japan’s Rakuten shows how the mobile share of e-commerce is growing as well, from 10% of e-commerce in 2006 to nearly 20% now.

Video now accounts for 69% of mobile data traffic, and the overlap between mobile users and social web users continues to grow; more and more users are accessing the social web from a mobile device. Real-time technology and location-based services are expected to drive mobile retail, and a very interesting fact is that the average iPhone user only spends 45% of his on-device time making voice calls.

Some more mobile web usage statistics and facts:

  • More people have mobile phones than Internet-connected PCs (4 billion) 

  • SMS penetration ~50% and fully mainstream (82% of users <24 y.o.)

  • 82 million Americans can recall seeing advertising on their phone over last 3 mos. (approx. 30% of 270m adult phone users)

  • 25% of phone users (65 mm) are accessing the mobile web but 80% of iPhone users are

  • 40% of Twitter users use the Internet on their phones (76% if you include WiFi) (Pew)

  • Internet Advertising Bureau survey found that 62 percent of agencies, media planners and advertisers believe mobile ad spending will continue to grow and emerge in marketing budgets

  • Mobile device is increasingly becoming small, portable PC experience with an Internet browser experience similar to that of 2000/2001 (just diff’t form factor)

  • In 2007, eMarketer reports that US advertisers spent $900 million on mobile, and double in 2008 to $1.7 billion

  • 21 million iPhones + ~20 million iPod Touches = 40-45million iPod-like devices

  • 50,000 apps from iTunes App Store and Nokia, RIM, MSFT and others now w app stores; 1 billion+ app downloads to date

  • 70% of people sleep with their mobile phones (Zumobi)

  • More than 60 million mobile views per month for New York Times; one of 4 apps pre-loaded on the Palm Pre

  • Joseph Porus of Harris Interactive: “”Mobility could be recession-proof and be one of the strongest ways of effectively marketing in tough economic times”

  • 35% of mobile advertising campaigns cost less than $10,000 (Forrester)

Mobile Device Product Categories & Feature Sets

There are four primary mobile device product categories in widespread use today, and each of these four mobile device product categories is typically configured by the device manufacturers with a certain base set of features and functionality. The four mobile device product categories, listed with their typical bandwidth usage per month, are:

  1. Feature Phones:  Feature Phones such as the Motorola Razr are used primarily to make calls, and they consume little bandwidth even for web activities because they have stripped-down web browsers. Feature phones and their users tend to consume around 100 Megabytes of data downloads a month, using 4 MB of voice calls an hour, and 4 to 5 MB of web browsing per hour.

  2. Smartphones: Smartphones such as Research in Motion’s popular Blackberry are used for phone calls, email, and light web browsing. Smartphones and their users tend to consume around 185 Megabytes of total monthly data downloads, utilizing 4 MB per hour for voice calls, and 4 to 5 MB of web browsing.

  3. Superphones: Superphones are advanced smartphones, including Apple’s iPhone and Motorola’s Droid, that make it easy for people to surf the web and watch online videos, leading to much higher bandwidth use. Superphones and their users tend to consume around 560 Megabytes of total monthly data downloads, using 4 MB per hour for voice calls, 40 MB per hour for web browsing, 60 MB per hour for internet radio, and 200 MB per hour for YouTube videos.

  4. Tablet Computers: Tablet computers such as Apple’s newly unveiled iPad are likely to send data use even higher. The iPad will chew up even more bandwidth than the iPhone because of its larger screen. Tablet computer and iPad users tend to consume 800 to 1,000 Megabytes of total monthly data downloads, using 50 to 60 MB per hour for web browsing, 60 MB per hour for internet radio, and 300 to 400 MB per hour for YouTube videos.

If your web based application or site is not optimized for the mobile web, you are falling behind and losing out on transaction revenue, sales, data, customers: you name it.

There are many methods and techniques that can be used to optimize your web based application or site for the mobile web. In this article I will describe how I optimized a commercial b2c ecommerce application for the mobile web, and then I will go into more details as to how you can use the same techniques I used on the http://www.tshirtnow.net mobile site and also how you can use different techniques to optimize your own web-based mobile application or site.

For the tshirtnow.net mobile site, I utilized a technique to present a mobile-optimized version of the tshirtnow.net web site to mobile browser users such as those surfing the web site on an iPhone, iPad, or Android mobile phone, and the regular version of the tshirtnow.net web site to users who were accessing the web-based b2c tshirtnow.net ecommerce application from regular web browsers on a desktop or laptop computer with a browser like Google Chrome or Microsoft Internet Explorer.

But using a special CSS stylesheet that is optimized for mobile browsers, along with the reglar tshirtnow.net CSS stylesheet, we are able to automatically detect what type of mobile browser platform the user is currently accessing the tshirtnow.net web site with. Using the CSS information contained in the tshirtnow.net mobile cascading style sheet (CSS), we are able to render the exact same html content which represents the different pages on the site such as product detail pages, order status pages, and the home page with different formating and styles, and even content sections, all just by using CSS.

The advantages of this technique are rather obvious. First of all, there is no need to recreate dozens or even hundreds of static html content pages, as the exact same content and pages can be cleverly re-purposed simply by providing for planned degradation of the user’s web experience according to what type of mobile device and mobile browser platform they are currently using.

Secondly, the use of CSS to provide a mobile optimized experience allows for the use of special CSS tags and techniques which can provide iPhone and iPad iOS orientation (landscape or portrait) and touch detection, intelligent web page scaling, special mobile OS (iPhone, iPad iOS or Android, Blackberry, HP WebOS) controls and rich media player capabilities, and phone/web integrated telephony. I will go into much more detail about some of these advanced CSS capabilities and I will provide more information about them as well as links to more resources on the web later in this article.

I encourage readers of this article who have not already done so, to read my previous article, a Glossary of mobile Web Terminology, for references to some of the terms I will use throughout this article. Knowing mobile web terminology will also assist you in creating wireframes and mockups for mobile web applications, and will be a great boon to your mobile application software specifications as well.

The tshirtnow.net mobile web site

For tshirtnow.net, I utilized a mobile optimized CSS style sheet. It detects which type of browser platofrm the user is accessing the tshirtnow.net web site with, and then serves that user either the regular tshirtnow.net home page, or the mobile optimized tshirtnow.net home page. Here is what most users see when they access the tshirtnow.net web site with a normal desktop computer browser:

And here is what a user accessing the same tshirtnow.net home page using mobile safari on an Apple iPhone would see:

The mobile version of the tshirtnow.net home page, as seen on an Apple iPhone (iOS)

As you can see, iPhone users see a gently degraded web page, which contains many of the most important, but not nearly all, of the controls, links, graphics and content of the normal tshirtnow.net home page. This mobile-specific version of the exact same web page is presented to the user not though the use of another web page, but simply through the use of the mobile-optimized style sheet.

Here is another example of how the tshirtnow.net b2c ecommerce web application is able to detect a mobile browser user and serve up content optimized for mobile from the exact same html page. Here is what the order status page looks like to a user accessing the tshirtnow.net web site from a regular desktop computer browser like Microsoft Internet Explorer or Mozilla Firefox:

And here is what a user accessing the same tshirtnow.net order status page using mobile safari on an Apple iPhone would see:

The mobile version of the tshirtnow.net order status page (iOS)

You can see that not only has the check order status button been dynamically resized in order to accomodate the smaller screen width of the iPhone mobile safari browser, but also that the hairline css curved corners border around the order number and email address input form fields has been resized too. All of this dynamic width modification, including the button graphic itself, which is rendered using standards-based css, happens on the fly from one set of html pages.

If you perform platform-specific css coding into your mobile stylesheet, which I will demonstrate how to do later in this article, then you can take advantage of such features as iOS iPad and iPhone orientation detection and dynamic adjustment, touch interface enhancements, and CTI, or Computer Telephony Integration features like click-to-call:

iOS platform-specific controls like this iPhone selection dial are supported natively through CSS

A typical b2b or b2c web-based ecommerce application that provides content pages that are driven by databases and displaying and presenting the results of database queries can produce thousands of individual web pages. To provide a mobile-optimized version of each of these pages is a prohibitively expensive and time-consuming endeavor that is beyond the performance envelope of most software development organizations.

The skillset needed to perform heavy CSS manipulations and platform-specific mobile optimizations may not be present on your current software development team. J2ee and other types of system and application software programmers may not have the requisite ability to manipulate and create a mobile optimized CSS stylesheet, and the necessary experience required to effectively develop and test platform-specific and progressively enhanced mobile CSS may not be present on your current team.

By utilizing a mobile CSS stylesheet to render the same content pages, you have provided a way to render those thousands of dynamic, database-driven web pages on the fly, and ready for your mobile web users. For example, here is one of the many thousands of product detail pages on the tshirtnow.net ecommerce site, as it would appear to a normal desktop web browser:

And here is what a user accessing the same srv tshirt product detail page using mobile safari on an Apple iPhone would see:

A mobile version of a tshirtnow.net tshirt product page (iOS)

You can see that the mobile version of the tshirtnow.net product detail page contains less content, and the content that is displayed on the mobile version of the product detail page is in a different location than the content on the regular, desktop browser version of the tshirtnow.net product detail page. All of this is performed not through HTML manipulations or server side includes, but is instead accomplished exclusively through the use of CSS.

Product detail page features such as tags are specially presented on Apple iPhone iOS through CSS

Because of this use of CSS to render mobile versions of the same html content pages, all scenarios have been accounted for, opening up the entire tshirtnow.net web site, all products, all static html content pages, all dynamic interaction controls such as search engines and results pages, are made available to mobile web browsers using this technique.

If instead the decision had been made to create unique, static html pages for mobile browsers, then a detection mechanism such as WURL or user-agent string detection would have had to have been employed in order to serve up unique html pages. The program to create many thousands of unique pages for all of the major functions, plus a unique mobile template for all of the product detail pages, would have been extremely cost and resource intensive.

Tips for Handheld CSS Style Sheets

Handheld media stylesheets should be as small and compact as possible because of download time.

What can you do to simplify your site and make it more usable in mobiles? First, eliminate some of these problematic items from mobile display.

  • Eliminate floats and frames

  • Eliminate columns – one column with the content first is the best option

  • Eliminate scripted effects such as popups or pop out menus in favor of plain old HTML and simple text menus

  • Eliminate decorative images that slow down the loading process. Use display:none to remove anything that isn’t absolutely necessary, such as links to external resources. Remember, however, that devices that don’t understand CSS won’t do anything withdisplay: none. Any essential images need to be reworked for the small screen and the width and height attributes need to be included in the HTML.

  • Eliminate nested tables and layout tables. If you have tabular data, consider finding a way to present it in a linearized alternate display.

Once you’ve simplified through elimination, start building the rules you need to add. Consider these ideas.

  • If you’re not already using relative measures, switch to ems or percentages rather than pixels

  • Reduce margins, paddings and borders to suit the small screen

  • Use smaller font sizes for headings and paragraph text

  • If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow. Keep the number of clicks required to get to content as minimal as humanly possible. Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.

  • Make sure your color combinations provide good contrast between foreground and background colors, particularly for devices with fewer color options.

Sample Handheld CSS Stylesheet


/* mobile styles */

@media handheld {

html, body {

font: 12px/15px sans-serif;

background: #fff;

padding: 3px;

color: #000;

margin: 0;

}

#sidebar, #footer {

display: none;

}

h1, h2, h3, h4, h5, h6 {

font-weight: normal;

}

#content img {

max-width: 250px;

}

.center {

width: 100%; !important;

text-align: center;

}

a:link, a:visited {

text-decoration: underline;

color: #0000CC;

}

a:hover, a:active {

text-decoration: underline;

color: #660066;

}

}

/* iPhone-specific styles */

@media only screen and (max-device-width: 480px) {

html {

-webkit-text-size-adjust: none;

}

}

Resources for testing your mobile applications

As with any other type of Web design, testing is a big part of the process. However, testing websites for mobile devices brings additional challenges, and fortunately, there are some tools available that were created especially for these purposes:

Opera Mini Browser Simulator

http://www.opera.com/mobile/demo/

The Opera Web browser comes with a feature that is of use to QA – the Opera Small Screen Renderer.

This tool can be used to test any Web page and see how it will look in a tiny window like on a cell phone. To use it:

 Download the latest version of Opera.

    1. Go to the page you want to test.
    2. Hit Shift-F11.
      The screen will switch to a narrow version of the page.
    3. When you’re done testing, hit Shift-F11 to toggle back to normal view.

Apple iPhone Safari Debugging and Testing Tips & Instructions:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515-SW1

 W3C mobileOK Checker:

http://validator.w3.org/mobile/

ready.mobi mobile site automated checker & reporting tool:

Ready.mobi

 Blackberry Device Simulators:

http://na.blackberry.com/eng/developers/resources/simulators.jsp

 Nokia Mobile Phone Simulator:

http://mtld.mobi/emulator.php?emulator=nokiaN70&webaddress=mtld.mobi

OpenWave Phone Simulator:

http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/

iPhoney iPhone Simulator for OS X:

http://www.marketcircle.com/iphoney/

 How to setup desktop Safari on Windows and OS X to emulate iPad and iPhone:

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

 Mobile Phone Web-based Emulator:

http://emulator.mtld.mobi/emulator.php?emulator=sonyK750&webaddress=stepforth.mobi

 BrowserCam Cross-Browser Device Screen Captures:

(Instantly see mobile pages in any browser on device operating systems)

http://www.browsercam.com/Default2.aspx

W3C Mobile Test Harness:

http://www.w3.org/2007/03/mth/harness

 Cameron Moll’s Mobile HTML & CSS Styling Test Pages:

http://cameronmoll.com/articles/mobile/mkp/

Patrick Griffith’s Handheld Media Test Page (Test to see if handheld device interprets media=”handheld”):

http://htmldog.com/test/handheld.html

 Good, General Mobile Web Testing Resources Available Here:

http://carsonified.com/blog/mobile/make-your-site-mobile-friendly/

Apple iPhone / iPad / iOS Resources

Apple iPhone Developer Center:

http://developer.apple.com/iphone/index.action

 iUI Interface Library / Framework Documentation:

http://code.google.com/p/iui/

http://www.k10design.net/articles/iui/

 iPhone Web HTML Application Home Screen Icons, Viewport Adjustments:

http://www.hanselman.com/blog/MakeYourWebsiteMobileAndIPhoneFriendlyAddHomeScreenIPhoneIconsAndAdjustTheViewPort.aspx

 Touch Interface Detection:

http://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices

 iPad Orientation Detection CSS:

http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised

http://www.cloudfour.com/ipad-orientation-css/

http://www.cloudfour.com/ipad-css/

 Preparing Your Web Content for iPad:

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

iPad CSS How To:

http://thomasmaier.me/2010/03/howto-css-for-the-ipad/

 Building an iPhone App using jQTouch & PhoneGap, without Objective-C:

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-build-your-first-iphone-app/

http://radar.oreilly.com/2010/01/ipad-opportunities-for-web-dev.html

http://oreilly.com/catalog/9780596805784/

Blackberry Developer Zone:

http://na.blackberry.com/eng/developers/

Blackberry Browsers Stylesheet and CSS Support Information:

http://docs.blackberry.com/en/developers/deliverables/11844/Feature_CSS_512751_11.jsp

How to target the Blackberry browser:

http://stackoverflow.com/questions/913040/how-to-target-the-blackberry-browser

Blackberry Device Simulators:

http://na.blackberry.com/eng/developers/resources/simulators.jsp

 RIM Blackberry Developers Reference Guide: Blackberry Browser HTML, CSS and JS Information:

http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry%20Browser

 RIM Blackberry Browser CSS Reference Guide:

http://docs.blackberry.com/en/developers/deliverables/5683/CSS_Reference.pdf

RIM Blackberry Browser Content Design Guidelines:

http://docs.blackberry.com/en/developers/deliverables/4305/BlackBerry_Browser-4.6.0-US.pdf

In the BlackBerry Documentation for Developers, there is a documentation for the BlackBerry Browser, including CSS Reference – BlackBerry Browser. There is no specific mention of CSS3, but that document lists supported CSS properties.

There is also a BlackBerry Widget web standards support page that states 4.7.1 and 5.0 have partial support for CSS 3 color and full support for CSS 3 marquee, CSS 3 media queries, CSS 3 namespaces and CSS 3 selectors.

Opera Mini 5 Optimization:

http://dev.opera.com/articles/view/opera-mini-5-beta-developers/#optimizing

Opera Mini Browser-based Simulator:

http://www.opera.com/mobile/demo/

How to serve the right content to mobile browsers:

http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/

 W3C CCS3 Media Queries Specification:

http://www.w3.org/TR/css3-mediaqueries/

 Mobile Device Support through JavaScript & CCS Media Queries:

http://floggingenglish.com/2009/06/18/mobile-device-support-through-javascript-and-css/

 Safe Cross-Platform, Cross-Device Media Queries:

http://dev.opera.com/articles/view/safe-media-queries/

HTML & CSS For Mobiles:

http://www.htmldog.com/ptg/archives/000055.php

Mobile CSS is a reality:

http://www.htmldog.com/ptg/archives/000056.php

CSS Discuss: Handheld Style Sheets:

http://css-discuss.incutio.com/wiki/Handheld_Stylesheets

Mobile Style Guides:

http://patterns.design4mobile.com/index.php/Mobile_Style_Guides_-_Screen_Design,_Part_1

You can try acid3.acidtests.org and http://www.css3.info/selectors-test/test.html on the respective browsers to check some compatibility, but that may not be an exact determining factor of full compatibility. However I don’t think any of the mobile browsers currently fully support CSS3.

—————————-

Both iPhone and Android systems use WebKit as the rendering engine in their mobile browsers. I believe Blackberry are moving to Webkit as well at some point. This engine has some of the best support for parts of CSS 3 available at the moment, as well as quite a lot of proprietary extensions.

I would recommend researching what is available in WebKit, and then testing.

A great resource for support tables is http://www.quirksmode.org where PPK is doing more and more mobile browser testing to answer just these kind of questions.

http://www.russellbeattie.com/blog/css3-and-the-death-of-handheld-stylesheets

An Introduction to the Mobile Web:

http://dev.opera.com/articles/view/introduction-to-the-mobile-web/

The Mobile Phone Directory –  Phone Specifications, Glossary of Terms:

http://www.mobile-phone-directory.org/

Mobile Web Glossary from the BBC:

http://www.bbc.co.uk/mobile/web/glossary.shtml?d

WURFL — Wireless Universal Resource File —  (SourceForge):

http://wurfl.sourceforge.net/

WURFL API Intro:

http://wurfl.sourceforge.net/newapi/

WURFL Java API:

http://wurfl.sourceforge.net/njava/

Wikipedia Entry – Microbrowser:

http://en.wikipedia.org/wiki/Microbrowser

Wikipedia Entry – Mobile Phone:

http://en.wikipedia.org/wiki/Mobile_phone

Cameron Moll’s Mobile Web Design Series:

Part 1: http://www.cameronmoll.com/archives/000415.html

Part 2: http://www.cameronmoll.com/archives/000428.html

Part 3: http://www.cameronmoll.com/archives/000577.html

Making Small Devices Look Great:

http://dev.opera.com/articles/view/making-small-devices-look-great/

The Pros and Cons of Developing a Mobile Version of Your Website:

http://www.dirjournal.com/articles/mobile-search-the-pro-and-cons-of-developing-a-mobile-version-of-your-website/

Bulletproof Mobile Device Detection:

http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/

A List Apart: “Return of the Handheld Stylesheet”:

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

A List Apart: “Put Your Content in My Pocket” (iPhone information):

http://www.alistapart.com/articles/putyourcontentinmypocket/

A List Apart: “Understanding Progressive Enhancement”:

http://www.alistapart.com/articles/understandingprogressiveenhancement/

Progressive Enhancement for Mobile Media Queries:

http://www.iheni.com/progressive-enhancement-for-mobile-media-queries/

Server-Side Scripting for Bulk Mobile Site Page Re-engineering:

http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly

Mobile Browser / Mobile Web Usage Statistics

http://gs.statcounter.com/#mobile_browser-ww-monthly-200903-201004

http://www.upsdell.com/BrowserNews/stat_trends.htm

http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.php

http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html

http://johannburkard.de/blog/www/mobile/mobile-browser-statistics-webkit-on-the-rise-opera-losing-share.html

http://moconews.net/article/419-the-top-mobile-browsers-are-not-what-you-think/


Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies, software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. I have been working in the software engineering and ecommerce industries for over fifteen years. My interests include computers, electronics, robotics and programmable microcontrollers, and I am an avid outdoorsman and guitar player. You can connect with me on LinkedIn, follow me on Twitter, follow me on Quora, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications and software development, I’m a Technical PMO Director, I’m a serial entrepreneur and the co-founder of several ecommerce and web-based software startups, the latest of which are Twitterminers.com and Tshirtnow.net.

What are some good books on User Interface design? How do you define user interfaces in your software specification documents? The Hub Tech Insider User Interface Design Bookshelf July 31, 2011

Posted by HubTechInsider in Agile Software Development, Ecommerce, Mobile Software Applications, Product Management, Project Management, Social Media, Software, Uncategorized.
Tags: , , , , , , , , , ,
add a comment
Screenshot of Glade Interface Designer

Image via Wikipedia

The Hub Tech Insider User Interface Design Bookshelf: Essential UI Design Books for IT Directors, Project Managers, Program Managers, Software Requirements Engineers, Business Analysts, User Interface Designers, Graphic Designers, Interaction Designers and Information Architects.

Some of the tools that I typically use to produce wireframes and mockups to specify software that is under development include traditional desktop personal computer graphics application software packages such as Adobe Illustrator and Photoshop, business graphics and diagramming packages such as Microsoft Visio, and many others, including some on the Mac OS X and Linux platforms.

But no matter which software program you use to prepare your wireframes and mockups, you still need to have the knowledge surrounding what types of controls are available, and the wisdom to know the most apropos situations in which to use those software controls.

It may be surprising to many people that are not involved in the software industry, but it is not always system and application software programmers who are the most familiar with these types of user interface interactivity patterns and controls. User interface designers, graphic designers, and information and interaction architects are usually the ones who specify these types of “Web 2.0” controls.

If you are writing software specification documents, I recommend that you become as familiar as possible with all of the different types of rich internet application controls and interaction patterns that are examined in detail within these books. Programmers and project and program managers will benefit as well.

A great amount of time and effort will be saved if everyone on the project team has familiarity with these fundamental web interface and interaction patterns. Having a common vocabulary with which to communicate to each other in design and development meetings will pay dividends throughout the course of the software development lifecycle.

The ability to suggest an interaction pattern or a type of control that can preserve screen or page real estate, for instance, can make the critical difference in getting a software system design specified in a limited amount of time. Having knowledge of user interface best practices and common user interaction patterns in-house, on the project team itself, can not only save money in avoidance of expensive user interface consultants and UI design firms, but it can also ensure that the tricky question of post-implementation compliance amongst your development team and programming staff.

I have compiled a list of books that in my opinion merit a place on any professional user interface designer’s bookshelf. If you are looking to stock your User Interface library, you really can’t go wrong with this list of books.

I feel that IT Directors, Product Managers, Program Managers and Project Managers, as well as Graphic Designers, Information Architects, and Interaction Designers and Usability Engineers (read this article if you need help understanding what these job titles mean) could all benefit from reading several or all of these books.

I have found in my professional career that having advanced knowledge of User Interface design techniques and best practices aids me greatly in producing high quality project plans and functional specifications for web based applications and their related software development projects. Mockups and wireframes that incorporate the various design patterns outlined in these books have greatly increased my ability to communicate and develop project related deliverables and artifacts for complex and cutting edge user interfaces, particularly those that include social media platform integrations and RIA, or Rich Internet Application, frontends.

The more knowledge that you acquire in your professional career on a software development team, and the more you know about user interfaces for web based applications, the more value you will be capable of delivering to both your employer and yourself in the form of expanded career opportunities.

Web Form Design: Filling in the Blanks

By Luke Wroblewski. Rosenfeld Media, May 2008.

Web Form Design: Filling in the blanks, by Luke Wroblewski

Anyone who designs anything for the web needs a copy of this. It makes it so nice to not have to think about designing forms. I can spend my time on more interesting design challenges. This book doesn’t leave my desk.

Forms make or break the most crucial online interactions: checkout, registration, and any task requiring information entry. In this book, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging web forms.

I have found this book to be the most practical, comprehensive and data-driven guide for solving form design challenges and I consider it an essential reference.

The Smashing Book #1

https://shop.smashingmagazine.com/smashing-book-intl.html

The Smashing Book #1

This book is available exclusively from Smashing Magazine. This book looks at Web design rules of thumb, color theory, usability guidelines, user interface design, best coding and optimization practices, as well as typography, marketing, branding and exclusive insights from top designers across the globe.

This book contains ten carefully prepared, written and edited stories that are based upon topic suggestions and wishes of Smashing Magazine’s readers. The topics covered here are fundamental and so the content is highly practical.

The Smashing Book #2

https://shop.smashingmagazine.com/smashing-book-2-intl.html#d=smashing-book-2

The Smashing Book #2

This book shares valuable practical insight into design, usability and coding. It provides professional advice for designing mobile applications and building successful e-commerce websites, and it explains common coding mistakes and how to avoid them. You’ll explore the principles of professional design thinking and graphic design and learn how to apply psychology and game theory to create engaging user experiences.

Designing Web Interfaces: Principles and Patterns for Rich Interactions

By Bill Scott & Theresa Neil

http://www.amazon.com/gp/product/0596516258?ie=UTF8&tag=looksgoodwork-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596516258

Want to learn how to create great user experiences on today’s web? In this book, UI experts Bill Scott and Theresa Neil present more than 75 design patterns for building great web interfaces that provide interaction. Distilled from the author’s years of experience at Sabre, Yahoo!, and Netflix, these best practices are grouped into six key principles to help you take advantage of the web technologies available today. With an entire section devoted to each design principle, Designing Web Interfaces illustrates many patterns with full-color examples from working websites. If you need to build or renovate a website to be truly interactive, this book will give you the principles for success.

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

by Steve Krug

http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_bxgy_b_img_c

Five years and more than 100,000 copies after it was first published, it is very difficult to imagine anyone working in web development or design that has not read this classic on web usability, but people are still discovering it every day. In this second edition, Steve adds three new chapters in the same style as the original: wry and entertaining, yet loaded with insights and practical advice for novice and veteran alike. Don’t be surprised if it completely changes the way you think about web design.

The three new chapters are entitled: Usability as common courtesy (why people really leave web sites), Web accessibility, CSS, and you (making sites usable and accessible), and Help! My boss wants me to ______. (Surviving executive design whims).

In this second edition, Steve adds essential ammunition for those whose bosses, clients, stakeholders, and marketing managers insist on doing the wrong thing. If you design, write, program, own, or manage web sites, you must read this book.

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems

http://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0321657292/ref=pd_bxgy_b_img_b

It’s been known for years that usability testing can dramatically improve products. But with a typical price tag of $5,000 to $10,000 for a usability consultant to conduct each round of tests, it rarely happens.

In this how-to companion to Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug spells out an approach to usability testing that anyone can easily apply to their own web site, application, or other product. (As he said in Don’t Make Me Think, “It’s not rocket surgery”.)

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349/ref=pd_sim_b_2

Saul Wurman first used the term Information Architecture in his book of the same name. His book was mostly lots of really pretty pictures of media and webs compiled from a graphic design perspective; they were beautiful but never really dealt with the information end of things. Rosenfeld and Morville get it right. They show how to design manageable sites right the first time, sites built for growth. They discuss ideas of organization, navigation, labeling, searching, research, and conceptual design. This is almost common sense, which is often overlooked in the rush for cascading style sheets and XML.

The Elements of User Experience: User-Centered Design for the Web

http://www.amazon.com/Elements-User-Experience-User-Centered-Design/dp/0735712026/ref=pd_sim_b_5

From the moment it was published almost ten years ago, Elements of User Experience became a vital reference for web and interaction designers the world over, and has come to define the core principles of the practice. Now, in this updated, expanded, and full-color new edition, Jesse James Garrett has refined his thinking about the Web, going beyond the desktop to include information that also applies to the sudden proliferation of mobile devices and applications.

Successful interaction design requires more than just creating clean code and sharp graphics. You must also fulfill your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won’t help you balance those goals without a cohesive, consistent user experience to support it.

With so many issues involved—usability, brand identity, information architecture, interaction design— creating the user experience can be overwhelmingly complex. This new edition of The Elements of User Experience cuts through that complexity with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Garrett gives readers the big picture of user experience development, from strategy and requirements to information architecture and visual design.

Forms that Work: Designing Web Forms for Usability

by Caroline Jarrett and Gerry Gaffney

http://www.amazon.com/Forms-that-Work-Interactive-Technologies/dp/1558607102/ref=pd_sim_b_3

Forms are everywhere on the web – used for registration and communicating, for commerce and government alike. Good forms make for happier customers, better data, and reduced support costs. Bad forms fill your organization’s databases with inaccuracies and duplicates and can cause the loss of potential or current customers. This book isn’t about just colons and choosing the right widgets. It’s about the entire process of making good forms, which has a lot more to do with making sure you’re asking the right questions and in such a way that your users can answer than it does with whether you use a drop-down list or radio buttons.

If your web site includes forms, then you need to read this book. In an easy-to-red format with lots of examples, Caroline Jarrett, who runs the usability consulting company Effortmark Ltd.(http://www.usabilitynews.com), and Gerry Gaffney, who runs the usability consulting company Information & Design Proprietary Ltd.(http://www.uxpod.com), present their three layer model – appearance, conversation, and relationship. You need all three for a successful form – a form that looks good, flows well, asks the right questions in the right way, and most importantly, gets users to fill it out.

Designing good forms is trickier than people think. This book explains exactly how to design great forms for the web. Liberally illustrated with full-color examples, it guides readers through how to define and gather requirements to how to write questions that users will understand and want to answer, as well as how to deal with instructions, progress indicators, and error conditions.

I found that this book provides proven and practical advice that will help designers avoid pitfalls, and produce forms that are aesthetically pleasing, efficient, and cost-effective.

The book is filled with invaluable design methods and tips to help ensure accurate data and satisfied customers, and includes dozens of examples, from nitty-gritty details (label alignment, mandatory fields) to visual design (creating good grids, use of color).

Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points

http://www.amazon.com/gp/product/073571410X?ie=UTF8&tag=looksgoodwork-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=073571410X

by Matthew Linderman and Jason Fried

Let the 37signals team show you the best way to prevent your customers from making mistakes, and help them recover for errors if a mistake does occur. This book doesn’t leave my desk either.

The folks at 37signals have created an invaluable resource: tons of ‘best practice’ examples for ensuring that web users can recover gracefully when things – as they inevitably will – go ‘worng’ !

In this book, you will learn 40 guidelines to prevent errors and rescue customers if a breakdown does occur. You will see hundreds of real-world examples from companies like Amazon and Google that show the right (and wrong) ways to handle crisis points.

You can also use this book to evaluate your own site’s defensive design with an easy-to-perform test and find out how to improve your site over the long term.

About Face 3: The Essentials of Interaction Design

By Alan Cooper. Wiley 2007.

About Face 3, by Alan Cooper

Learn the rules before you break them. Please. Pretty please with a cherry on top? Get this book and read it if you are responsible for designing anything more than a simple web site. Good for Flex developers and Ajax developers as well. Lots of patterns that can be extrapolated for Rich Internet Applications.

Prototyping: A Practitioner’s Guide

http://www.amazon.com/gp/product/1933820217?ie=UTF8&tag=looksgoodwork-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1933820217

Prototyping: A Practitioner’s Guide” is a terrific and comprehensive review of both the prototyping process and the tools involved. There’s really very little with which to find fault. I found that the book both validated my experience in prototyping and provided new techniques to try out, with many “Aha!” moments in both respects. The inclusion of case studies illustrating the techniques provide additional perspective and make the techniques more “real”. The review of each prototyping technique/tool, whether paper or software-based, includes links to additional resources like toolkits, sample images, and the like – these would be especially useful to someone just getting started with a particular tool. Speaking as a designer who’s typically relied on HTML prototypes and Visio, I must say my interest in Adobe Fireworks and, to a lesser extent, Axure is piqued. I think any UI/UX/IX designer, of any level of experience, would get something out of this book. Not that it would be useful only to them – analysts and software engineers will benefit from it as well.


Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies, software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. I have been working in the software engineering and ecommerce industries for over fifteen years. My interests include computers, electronics, robotics and programmable microcontrollers, and I am an avid outdoorsman and guitar player. You can connect with me on LinkedIn, follow me on Twitter, follow me on Quora, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications and software development, I’m a Technical PMO Director, I’m a serial entrepreneur and the co-founder of several ecommerce and web-based software startups, the latest of which are Twitterminers.com and Tshirtnow.net.

How do you create a Competitive Analysis? What is a competitive analysis? July 24, 2011

Posted by HubTechInsider in Product Management, Project Management.
Tags: , , , , , , , , , , ,
add a comment

How do you create a Competitive Analysis document? What is a competitive analysis?

Competitive analysis documents can be found as a primary product management deliverable in most every industry, and even the simplest competitive analysis document displays two critical dimensions: the competitors and the criteria, or the competitive framework. The purpose of the competitive framework is to present the analysis data in a way that makes it easy to compare the various products, companies, or services across the different marketplace features or comparative criteria.

Elements of an effective competitive anlysis

Competitive analyses vary along two dimensions: competitors and criteria, and so it is common for most competitive analysis documents to provide a visual mechanism for representing two or more products or services side-by-side with the differences showcased. The specific nature of those differences will vary depending on the competitive criteria the analysis author has selected. These competitive anlysis documents can vary in size, with some much longer than others because they their authors have elected to highlight more product features or more marketplace competitors on the analysis document.

“Two-by-two” competitive analysis plot

Every competitive analysis document shares three essential elements: a purpose statement, the competitive framework, which is the competitors and the criteria, and the comparative data. The analysis document may also provide more details about the overall products, the competitors and their market positioning, or the method behind the comparative analysis results.

The purpose of the competitive framework is to present the data in such a manner as to make it easy for a reader or viewer to compare the products or service offerings across the different comparative criteria.

When the competitive framework takes the form of a table, the competitors or products can run along the top of the table and the comparative criteria along the side. The criteria can vary from the very general to the very specific.

A typical table competitive analysis

A different kind of competitive framework is known in MBA programs as the “two-by-two” graph or plot. The “two-by-two” plots competitors or products on a simple grid depicting only two comparative criteria.

In a two-by-two competitive framework, the number of criteria is down to two, so the analysis tends to be much broader than a traditional competitive framework. The “two-by-two” competitive framework is excellent at turning subjective information into objective information. Although it is technically possible for a “two-by-two” competitive analysis author to use real numbers and actually plot along the scale, most two-by-two presentations are ideal for very broad criteria that might not lend themselves to hard numbers. This type of plot is useful to help identify holes in a market or competitive landscape. Competitors that are clustered around certain areas of the two-by-two plot may indicate that there are opportunities for a competitive product or service to fill those vacuums.

A “two-by-two” competitive analysis plot

Some research organizations use a modified version of the “two-by-two” plot format. Sometimes you may see competitors plotted out on a single square, with “waves” or “bands” of features, strategies, or market postions illustrated as areas of the single square. This format is equally effective, and it has the advantage of being an excellent format for the creation of a catalog of different one square competive analysis plots, one for each area of focus within the competitive landscape. So you could for instance have a single square plot for market positioning, one for revenue or scale of business, one for pltting out competitors’ different revenue situations, etc.

An example of a “wave” or “band” single-square plot

Yet another competitive framework that appears in competitive analysis documents and especially comparisons of different sites or user interfaces: the “small multiples”. This term was coined by information architect and data visualization guru Edward Tufte. In Tufte’s “The Visual Display of Quantitative Information”, he states, “Small multiples represent the frames of a movie: a series of graphics, showing the same combination of variables, indexed by changes in another variable.” In other words, “small multiples” are a series of graphics that allow the viewer to easily compare similar sets of information. In the case of user interface design or information architecture for the web, or graphics design for print or interactive media, this approach is most effective for comparing online and offline page layouts or interactive storyboards.

“Small multiples” chart comparing web site detail pages

Sometimes a competitive analysis will take the form of a table, with various stages of detail added as comparative criteria for each competive category. Great care should be taken by the author of the competitive analysis document that the length of the analysis does not become too unwieldy. Consider breaking up long competitive analysis documents into sections or categories.

Try to use as many graphic elements as possible in your competitive analysis documents. Graphs, charts, plots and tables are all excellent ways to present your competitve analysis data, and you should leverage these artifacts into your presentations and marketing communications.

The data is of paramount importance in a competitive analysis. The data can be as simple as yes-no values, indicating whether a product or service or competitor meets a particular criterion, or it can be descriptive, going into some detail for each criterion.

Yes-No values are a very common way to provide differentiating data in a competitive analysis. You’ve seen these kinds of competitive analyses on infomercials where the product in question is lined up with “other leading brands.” For each feature, the product gets a check mark while its competitors get an X, to show you how versatile the product is.

Feature comparison table

Spelling out your process can help address any possible methodological inadequacies. You might want to spend some time in a section of your competitive analysis document rationalizing the selection of competitors and criteria to increase the impact and veracity of your conclusions.

Explanation of a competitive analysis methodology

Subscribe to HubTechInsider on YouTube

Want to know more?

You’re reading Boston’s Hub Tech Insider, a blog stuffed with years of articles about Boston technology startups and venture capital-backed companies, software development, Agile project management, managing software teams, designing web-based business applications, running successful software development projects, ecommerce and telecommunications.

About the author.

I’m Paul Seibert, Editor of Boston’s Hub Tech Insider, a Boston focused technology blog. I have been working in the software engineering and ecommerce industries for over fifteen years. My interests include computers, electronics, robotics and programmable microcontrollers, and I am an avid outdoorsman and guitar player. You can connect with me on LinkedIn, follow me on Twitter, follow me on Quora, even friend me on Facebook if you’re cool. I own and am trying to sell a dual-zoned, residential & commercial Office Building in Natick, MA. I have a background in entrepreneurship, ecommerce, telecommunications and software development, I’m a PMO Director, I’m a serial entrepreneur and the co-founder of several ecommerce and web-based software startups, the latest of which is Tshirtnow.net.

HubTechInsider.com YouTube Channel

Subscribe to HubTechInsider.com YouTube Channel

SEO Made Easy 2013 FREE Special Report!

PHP for Beginners

Google + Domination for Business

LinkedIn for Business Training Course

Mastering WordPress Video Training Course

Twitter Business Magic Video Tutorial Series

%d bloggers like this: