Advertisement

A quick look at the table of contents shows the range of topics covered—from why the UI behind Microsoft’s Notepad application is successful to how iPhone’s Instagram application creates a “seamless” user experience through complete integration with the device itself, to perhaps less commonly encountered UI challenges such as Yupp TV’s 10-foot interface.

Described on the back cover as a “comprehensive, cross-disciplinary encyclopedia of user interface (UI) design,” “Digital Design Essentials” does not disappoint. Through 100 annotated examples, each accompanied by concise design guidelines and best practices; alongside supplemental case studies, Lal distills complex information into easily digestible parts.

Unlike other texts, which may be too technical for new comers to UI or potentially overwhelm a reader with too many examples, Digital Design Essentials features a clearly curated representational cross section of UI challenges and solutions.

book interior12

book interior8

Organized by interface with visual examples in each category accompanied by a summary, notes on best practices, design guidelines and user experience along with cross references “Digital Design Essentials” is structured to be easily navigable—equally lending itself to being a quick reference on the job or in the classroom. Much like Steve Krug’s “Don’t Make Me Think” and Josh Clark’s “Tapworthy,” Raj Lal’s “Digital Design Essentials” is sure to be a staple on my top recommended design books list.

book interior10

Lal kindly answered some questions for me and our readers about the book.

Q. Digital Design Essentials features 100 examples—what made you choose these specific sites, interfaces, etc.?

Raj Lal: In my last 15 years in the software industry, I have worked on desktop software, web applications, and mobile apps. That experience became the foundation for my book on design guidelines. I first researched desktop applications how they began with windows, icon, menu, and pointer (WIMP)-based interfaces, which evolved into graphical user interfaces (GUI). To start the book, I used some simple examples, like Notepad, Photo Editor, and Setup Wizard, to stress the design principles applied in their development that made them successful as well as useful.

I discussed their key design elements and how they served a specific purpose very well. Then I moved to complex applications like integrated development environment (IDE), media player, instant messaging, chat, and dashboard applications. I chose some of the most popular examples of these to illustrate the underlying design pattern that is essential for a developer to understand. Then I covered more advanced user interfaces and current trends in desktop applications like interactive voice response systems, direct user interfaces, 3-D user interfaces, and the currently popular Metro UI and Skeuomorphic design. The examples reinforced the basic philosophy behind the user interface design and gave me the opportunity to discuss the architecture, design guidelines, best practices, and tips for a better user experience.

When choosing applications to illustrate Web design guidelines, I looked for examples that showed the correct interaction designs. The Web has become the biggest medium for communication and interaction. So the examples start with basic Web user interface guidelines, like how to get the key design elements right for a homepage design, personal website, blogger template, wordpress theme, knowledge base, wiki, etc. and progress to more complex applications like online commerce, shopping carts, user accounts, online forums, and sitemaps. These are required by the majority of the websites out there, and the book provides a set of standard guidelines for web designers to follow when designing them. The essentials were chosen to give the “big picture” view as well as to categorize design elements in these types of applications to help designers understand how they work.

raj lal1

Designers are experts in how websites will look, so this additional knowledge would make designers very powerful. The third section is about mobile apps. Working in the mobile industry for the last five years, I have contributed to a number of similar apps. As a result of having designed, developed, and written mobile apps, I became quite familiar with the different design guidelines that they required. For the book, I chose examples that represented the scope of the mobile app landscape: hybrid apps; mobile websites; apps for information, utility, lifestyle, etc.; address books; camera apps; photo apps; and mobile games, which are very important to understand because of their popularity. Then I discussed advanced apps like location-aware apps, apps for consumer service, augmented reality, Bluetooth, and near-field communication (NFC).

I also covered design guidelines for mobile ads, mobile commerce, search, and mobile home screens. The section on touch-based interfaces includes examples for capacitive touch as well as resistive touch namely, touch, multi-touch, accessible touch, gesture-based, and pen-based interfaces. The last section covers advanced categories like a 10-foot user interface for TVs and game console UI designs. Natural user interfaces create interaction based on the everyday behavior of users; natural language interfaces use spoken language to create interaction; intelligent user interfaces learn and adapt to user interactions and communicate in a friendly, human way; and finally, organic user interfaces that accept physical objects and shapes as input.

To sum up, I tried to present a variety of popular and successful examples to cover the complete landscape of user interfaces. My goal was to make life easier for a designer by creating a complete reference for user interface design.

Q. Who do you think will most benefit from the book (i.e., experienced designer vs. novice)?

Raj Lal: The book covers an amazing line of design and organizes the software from past to present and from simple to complex. It is meant for advanced designers, but beginners will also find value in reading the book. One user, Xu Cui, reviewed the book as follows: “While I have worked on a few websites and desktop products, I know little about design. This book contains rich contents with 100 simple and elegant examples from command line to modern mobile UI. With each example, the author provides practical tips. I feel I have become an expert after reading the book.” So although the book covers very advanced examples, it seems that beginners are benefiting more from reading it.

Q. Digital Design Essentials appears to be written very much as a “quick reference guide”—how do you envision it being used “on the job,” so to speak?

Raj Lal: Today’s designers don’t need to read a chapter to understand the application they are designing. They have better things to do. The book takes a completely fat-free approach to UI design, giving the reader everything he or she needs to know in two pages. It cannot get any better than this. In fact, when I was writing the book, each example covered five to six pages. We edited and re-edited, retaining only the most essential and difficult-to-grasp information. The book will give the reader an instant boost in understanding. Imagine you get a task to design an NFC app or a multi-touch app where do you start?

Right now, the only way to understand this is by looking at other similar applications, but that does not give you the architecture, or the background story, or even the design guidelines. There are no guidelines to explain why a touch app uses a particular gesture. Right now, a lot of designers have no choice other than copying the app design from another phone app without understanding the power and the limitations of the technology. The only option is to read about the topic comprehensively. Who has the time to do that? This book will open the eyes of designers to the mechanics behind each of these applications. This will allow them to create very useful and powerful designs.

Q. There’s been some discussion about the move away from skeuomorphic design, with one TechCrunch article calling skeuomorphism a “red-headed step child.” What are your thoughts on this—especially in terms of best practices cited in the book?

Raj Lal: If you read the book, you will understand how skeuomorphic design creates a powerful emotional impact on the user. When you see an old design in the new trend, the experience is very personal, delightful, and friendly. Old and known designs are accepted much more easily, and there is no learning curve there. But this familiarity comes with baggage. It goes against the simple design principle that says each design element needs to serve a purpose. It needs more work, which can be deemed unnecessary. The book also shows Microsoft’s Metro UI, which is the opposite of skeuomorphic design, and lists design guidelines, best practices, and tips to ensure a better user experience.

There is no right or wrong answer. Modern user interfaces favor the minimalistic design that is used in Microsoft platforms, Windows 8, Windows Phone, and Tablets. They have great potential, but would you call them successful yet? In the article in which he calls Skeuomorphic a “red-headed step child,” Anthony Ha pointed out correctly that the iOS 7 design seems to be moving away from traditional skeuomorphic design to minimalistic design. I think this decision might have been made because of the small real estate in a mobile screen. iOS design is dictated by the needs of iPhone users.

For a small-sized screen, minimalistic design makes more sense, because it displays the information better. Moreover, since the design has to transfer to iPad and so on, there can be only one design. But the importance of Skeuomorphic design cannot be ignored. Apple iPhone and iPad designs are very successful with their current design. What the change will bring, only time can tell.

Q. Are there any trends you see emerging on the horizon in digital design?

Raj Lal: The current trend is one interface for any kind of glass that displays information, be that viewed on a desktop screen, the Web, a mobile device, or a tablet. There are two distinct patterns that are trending in the user interface arena: one is 10-foot user interfaces for designing TV apps, which might be the next big revolution in UI design, and the second is user interfaces for wearable technology like Google Glass or the rumored iWatch.

The other big potential area is organic user interfaces. With Microsoft Kinect, for example, there is no more remote control; the human body is the input to the game console. The possibilities here are endless. In organic user interfaces, we are just scratching the surface. Check out Leapmotion for an amazing example of an organic user interface. These new technologies will need their own kind of user interfaces, and the only limitation is your imagination. The future does look bright for UI designers!

raj lal22For readers interested in hearing more from Digital Design Essentials author Raj Lal, he will be presenting on “Evolution of the Digital User Interface” and signing copies of Digital Design Essentials at the Digital Web and Design Innovation Summit on September 19–20 in San Francisco.