The Programmer's Apprenticeship - 03: Web Design Principles

Reading Notes The Programmer's Apprenticeship Design Principles

Word count: 1.5kReading time: 9 min

 2018/09/26

This is the third post in the reading notes series for The Programmer’s Apprenticeship: From Good to Great. The author, Jeff Atwood, is one of the founders of Stack Overflow. His articles cover a wide range of topics. He is a seasoned programmer, manager, and entrepreneur. This book discusses many things beyond programming. Whether you are a junior engineer or a senior engineer, this book is worth reading. As your experience grows, every time you re-read this book, you will gain new insights. Just as the title “From Good to Great” suggests, the author points out the path for you, but whether you can succeed depends on your own cultivation.

I will excerpt some wonderful remarks from the book and sometimes add my own insights or experiences. The outline of the reading notes is consistent with the outline of the book itself. This is also a method I learned from another source and have been using: “How to Read a Book”. I record it for my own frequent review and for readers’ reference. Below is the The Programmer’s Apprenticeship reading note series:

Criteria for Judging Websites

When the author was a judge for websites, he only had 30 seconds for each participating website. Regarding this: “Judging in 30 seconds is completely unfair, but it accurately reflects the situation in the real world.”

The author offered some suggestions to the contestants. Your website homepage needs to give people a “wow” feeling at first sight:

Loading speed must be fast, especially in the mobile Internet era. If it exceeds 1s, users will lose patience.
What on earth is this? Don’t leave incoming users in a fog. Let users know what this webpage is for as soon as they enter.
Show me an example.
Clearly tell me what to do, and clear away obstacles.
Embrace your audience, even if it means excluding other audiences.

In any Web application, the basic sketch of the homepage design is the first thing you should do, because it is the crucial initial design draft and your vision statement.

Pursue Simplicity

Pursuing simplicity lies more in carrying simple through to the end. Comparing the Yahoo homepage and Google homepage over the years, Google has achieved very restrained simplicity on the homepage, while Yahoo’s homepage has become increasingly complex with more and more information. Looking at it now, this is simply a “disaster” for portal websites.

Google’s simplicity puts complex things behind the scenes, instead of dumping them all on the user.

Will Apps Replace Websites?

We should start with simple design and scale up proportionately when necessary, rather than making things complicated from the start and then being forced to shrink. This is similar to the current Mobile-First design philosophy.

Why are apps better than websites?

Faster running speed
Use simple native UI controls
Better use of screen space
More suitable for mobile environments, even offline situations

Why are websites better than apps?

Websites can run on any device’s browser
Websites do not need installation
Websites do not need manual upgrades
Websites provide a unified user experience

From the comparison above, essentially each has its pros and cons. However, looking at subsequent developments, webpages and Apps will become closer and closer. Their development languages and running environments are becoming more consistent. Various cross-platform frameworks make the development of Apps and webpages no longer hugely different. With the popularity of mobile Internet, any App and webpage will be developed from a mobile-first perspective.

The boundary between webpages and Apps will be very blurred, and finally unified.

Remember Not to Stick to Conventions

We need to adopt the “right” way of doing things, not the “standard” way:

Fully understand the current specification and the reasons for its formation (Know what and also know why).
Deviation from this specification requires justification.
Collect user usage data during the experiment (A/B Test).
Make decisions based on data.

Doing Android system optimization is best done following the steps above: first understand the code logic, then understand why the code is written this way, then think about how to optimize. During this period, you need to find bottlenecks, make changes, get user data, and compare user data to choose the optimal solution.

Weird Single-Button Design

The iPhone’s single Home button setting has always been controversial because it makes the “back” operation more complicated. It’s okay on machines with smaller screens where you can use gestures, but on large-screen machines, backing up to the previous page is very inconvenient, and you have to use another hand to operate.

Usability Is Not Just Highbrow Art

If no one in your project cares about usability, then remember that the project is doomed to fail.

Usability testing is one of the most effective measures people can take to improve a website.
Since most organizations have the financial resources to hire professionals to engage in routine testing work, everyone should learn to do usability testing themselves.

The author recommends a book: Web Usability involves Eye Tracking (presumably referring to something like Eye Tracking Web Usability). Those interested can buy a copy to read.

The Other Side of Fitts’s Law

Fitts’s Law: The larger an object is and the closer it is to the cursor, the easier it is to click.

The author summarized the core idea of an article “Visualizing Fitts’s Law”:

Place commonly used UI elements at the edge of the screen, because the cursor automatically stops at the edge of the screen, so those UI elements will be easier to click.
Make the clickable area as large as possible. The larger the target, the easier it is to click.

Similarly, if there are necessary buttons that you do not want users to click, then making them smaller is never wrong. Make infrequently used or dangerous UI elements difficult to click.

Usability and Learnability

Website writing should adopt the “inverted pyramid” style: Tell the reader the conclusion at the beginning of the article, then write the most important supporting information, and finally introduce the relevant background.

Undoubtedly, you should try to put the most important information at the top, whether you are making a webpage, writing a program, writing an email, or making a resume, etc.

In addition, the author recommended a book UI Design Guidelines for Programmers (possibly User Interface Design for Programmers by Joel Spolsky). Those interested can take a look.

Just One More

If you want to add another UI element, please be sure that the UI element you add is not the last straw that breaks the camel’s back.

Dare to Say No

Innovation is not about accepting everything, but about saying no to everything except key features.

User Interface is Hard

This primarily talks about how when programmers create user interfaces, they are often rough and not user-friendly. However, from current developments, user interface design is no longer that difficult, and various beautiful interface frameworks can be applied very easily.

The Programmer’s Apprenticeship (or Building a Career in Software) is a compilation of the best articles from the Coding Horror blog. The book is divided into 8 chapters, covering topics such as time management, programming methods, web design, testing, user needs, the Internet, game programming, and technical reading. The topics selected by the author are all pain points in a programmer’s career. Many articles have high click-through rates and reply rates on blogs and the Internet. —— from Douban

Jeff Atwood founded the Coding Horror blog (codinghorror.com) in 2004 to record his thoughts and bits and pieces of his software development experience. Today, the blog has nearly 100,000 visits per day. Readers participate in comments, and various views and wisdom collide passionately there. —— from Douban

The writing style of The Programmer’s Apprenticeship is humorous, understanding, and caring; it is suitable for programmers at all stages from novice to veteran, and also suitable for students of computer science and related majors who are about to become programmers. The Programmer’s Apprenticeship can help readers pay more attention to the human nature and humanistic factors of technical work, thereby achieving a successful turning point in their programmer career. —— from Douban

About Me && Blog

Below is my personal introduction and related links. I look forward to exchanging ideas with fellow professionals. “When three walk together, one can always be my teacher!”