Following the announcement of the iPhone 4S release, there has been an overwhelming negative response. Apparently the entire media (tech and mainstream), and most of the population, had convinced themselves that the form-factor of the iPhone was going to change yesterday. And it would seem that looks are all we care about.

To start, the iPhone having a drastically redesigned case only one year after it was initially released is pretty un-Apple. For how many products do you see Apple completely redesigning the form on a yearly basis? Correct: none. That’s not Apple. It may be what some people want from Apple (after all, when they do redesign something—or design something new—it’s almost always awesome), but that’s not how they work. They refine and iterate to a final design internally, then launch to the public and make incremental changes over time. If the initial form wasn’t elegant enough to stand the test of time (which isn’t very long in the cell phone market), it would not have been released.

So yesterday we were introduced to the latest and greatest iPhone: the 4S. Consistent with all of Apple’s products, it iterated on an existing design. Unfortunately, this is as deep as most of the analysis of iPhone 4S has gone. It looks largely the same, so it’s not a big deal. Yeah, maybe there are some little tweaks inside but it LOOKS the same! How will all the people you pass on the street know you have THE COOLEST, LATEST iPhone?!

But what was really announced yesterday was monumental. It’s obvious why Apple needed a slightly longer release cycle to get this iPhone to market. Everyone seems to be overlooking these major points:

World phone

Remember antennagate? Not only has Apple fixed the problem, they leap-frogged the concerns to offer a CDMA-GSM-capable world phone that intelligently switches antennae to optimize transfer performance. And it supports HSPA+, which means effectively 4G speeds (twice iPhone 4).

Camera

Sure 8 mega pixels is nice, but new optics and sensors, a collection of new software for facial recognition, and auto-leveling of 1080P video? I just bought a nice, new point-and-shoot camera a few months ago, but I wouldn’t be the least bit surprised if iPhone 4S out-performs it—particularly with video.

Processor

A5. Twice as fast a processor in a phone that was already universally considered to be the quickest, most responsive smartphone in the world. And if there was any doubt that iPhone was the greatest mobile gaming device available, that can be set aside now.

Battery

Not only is there a more powerful processor, heavier-lifting software and twice-speed data transfer, but battery life actually improved!

Interface

We saw hints of iOS5 over the summer and began to see how a new notifications center and deep Twitter integration could evolve how we use iPhone. Yesterday we saw how Siri could completely change how we interact with a device. This isn’t “read my touchscreen” voice control like Android introduced. This is intelligent, contextual, human language interaction. Remarkably, it was only 4 years ago that Apple redefined human-computer interaction with multi-touch. Now they have introduced the next major revolution in human-computer interaction. Siri alone would have been a monumental announcement. It will have enormous, far-reaching impacts in technology.

Sorry if you didn’t get your tapered case.

We can’t automate everything. But we can come close.

Often when we start a new project that involves applications or flows there is a baseline assumption that technology should handle everything–the user shouldn’t have to be bothered. As we diagram flows and sketch interfaces, there is a nagging thrust to push every bit possible off on the technology. Many times this is a good idea. I shouldn’t insist a user learn the format I use for dates and properly map it to the day they have in mind, or click repeatedly through a calendar to find their day. Technology is more than capable of parsing a date in almost any format the user prefers and converting it to the format I need. I put the onus on technology to automate the date formatting task.

But what about a more complex task? Or something that involves interpretation, reasoning, balancing alternatives and subjective thought? Where is the line–or is it even as clearly defined as a line?

There is a continuum from users doing the work (manual) to technology doing the work (automated). Historically, all processes start on the far left of the continuum as a manual activity. Automation is introduced when the manual process becomes tedious, repetitious, overwhelming or burdensome. The intention of automation is to make a process more efficient. Automation doesn’t inherently make processes more efficient, though.

How do you know when to automate?

Variability: how much repetition is involved?

Automation favors tasks that are repeatable. The more variability a task involves, the harder it will be to automate. Tasks with a limited amount of variability (<25% of instances involve an exception to the rule) may benefit from a partially automated interface that allows for adjustment at the user’s request. Tasks with no variability are excellent candidates for automation. Tasks with high variability (>25% of instances involve an exception) should probably be left to the user.

Volume: how many people do this thing?

The more people performing a task, the greater the benefit from automating that task. If a relative few have to perform the task, carefully consider whether the effort of creating a technological solution is going to be less than continuing with a manual process.

Effort: how much time does this thing take?

Tasks that consume a lot of time are good candidates for automation. Time is relative, though, as it can be compounded by volume. In a task with high volume, a few seconds may be a long time. In a task with low volume, it may take minutes, hours or days to have the same impact.

Bottlenecks: are current executors a bottle neck?

Generally, a task considered for automation is part of a larger process. If the task in question is the bottleneck–the step that slows down the whole process–it is a good candidate for automation. The effort of automating a task that isn’t a bottleneck may not be worth it.

Susceptibility: is an error more likely by lots of humans, or a few algorithm authors?

A manual process relies on each individual user to execute correctly. A technological solution doesn’t remove that susceptibility to error, it just transfers it to a small team of algorithm authors. Both groups are susceptible to making errors. When individual users make an error, it only impacts their instance of the process. If algorithm authors make an error, though, it impacts every instance of the process. Generally, a team implementing a technological solution will exhibit more care than a standard user, but it is still important to consider which group is more likely to fail in your task.

Critical: what are the ramifications of an error?

The potential consequences of an error go hand-in-hand with susceptibility. In the date picker example above, the ramifications are very minor. In other tasks, errors could result in much larger issues. If a task is critical, it makes consideration of susceptibility that much more important. If a task is not critical, the automation versus manual decision has much less impact.

In most cases, there is not a yes-or-no answer for whether to automate. The answer lies somewhere along the continuum from user to technological responsibility. Tend toward automation for that which is repeatable and known. Keep users involved when there is high decision-making variability or a degree of algorithmic complexity that would be cost-prohibitive to get right. Most situations will land between the endpoints: some components will be automated while others are manual. The trick is to find the ideal placement for your application along the continuum.

Listing “customer personas” instead of features improves CTR by 200%

It’s often the little things that make the biggest impact. No new design. Same functionality. Just a tweak in messaging.

PearWords Startup Resources

Not sure what should be in your privacy policy? What about your NDA? PearWords offers some free templates with language to get you started.

How Paywalls Are Changing News Organizations’ Social Media Strategies

Most interesting just for its brief synopsis of the different pay models various traditional news organizations are trying online.

yiibu

A collection of thinking and proof of concept on the mobile Web.

Top 10 Mobile Internet Trends (2/11)

Lots of great data and trends from Matt Murphy and Mary Meeker.

Design Principles

Jeremy Keith shares his vast collection of assorted design principles.

f8 Conference Badges

A whole-scale re-consideration of what a conference badge is.

Comic Sans Criminal

A concise history and explanation of why you probably shouldn’t be using comic sans for *that*. Sweet presentation, too.

Measure Anything, Measure Everything

A peek behind the curtain of the Church of Graphs.

Wireframes are one of the earliest steps of the design process. At M|B, they fall into the Information Architecture part of our process. Once the architecture for the entire site is defined (in a site map), the next step is to design the architecture for key pages or templates. This is what a wireframe is used for.

A wireframe is kind of like the blueprints for a building. It shows all the elements of the page, suggests how they should be organized and begins to talk about interactions or states of the page. They do not show the “look & feel”–they are just a gray-scale representation of what makes up the page. For example, a wireframe will show primary navigation, but not what that navigation will look like (buttons, tabs, a colored bar, something else?); a wireframe will identify where a hero image will go and the type of message it will communicate, but not show the actual picture or final text.

To relay this information, at M|B we use gray-scale drawings of lines, boxes, shapes and words. We then overlay annotations that further define the meaning of elements and the thinking behind their purpose, location, interactions, content and any other details that will help communicate to designers, developers and writers.

Each template of a site should have at least one wireframe–sometimes more if a page has multiple states. Wireframes can also be used to show the major steps of a flow. These help define what form elements, buttons and actionable items make up each step of the flow.

Wireframes are the building blocks that identify the pieces of content that need to be written, the modules of a page that the CMS will need and the elements of the page that the visual designers must account for.

At M|B, we believe a wireframe:

• stipulates the elements of a page.
• stipulates the types of information on a page.
• creates a baseline for layout of elements on a page.
• creates a baseline for relationships of elements to one another on a page.
• recommends interactions of elements on a page.

A wireframe doesn’t:

• define the color scheme and visual design of the site.
• identify what images will be used.
• require how mark-up will be written.
• define what words will be used.

How is a wireframe different from a prototype?

While a wireframe is a static view of a page or template, a prototype has some interaction–it changes. Wireframes can be used as prototypes in some situations. For example, paper prototypes are often a series of wireframes, presented in a specific order. Generally when we build a prototype, though, we’re looking for more advanced definition of interaction and flow–a “clickable” prototype. In this case, a prototype is electronic (we like to use ProtoShare) and shows interactions as a user clicks (or touches) and navigates about the prototype.

For heavily informational sites, we generally tend towards wireframes. For applications or flow-oriented  sites, prototypes usually communicate better.

How is a wireframe for a mobile site different?

It’s not! While a mobile wireframe will generally have less real estate than a desktop wireframe for communicating ideas or presenting forms, the concepts stay the same. A mobile wireframe communicates all the same things that a normal wireframe does.

We often create mobile and desktop wireframes side-by-side. The desktop wireframe shows the priority of elements and the general organization for a desktop experience while the mobile wireframe shows how things change in the mobile experience. Sometimes the only difference is organization (particularly when working with responsive design). Other times, the entire navigation or purpose of the site might change for a mobile user. Regardless, the concepts of what a wireframe does all remain the same.

What does a wireframe look like?

Generic Wireframe (.pdf, 45kb)

It’s been a long time since our last “sweet links”–too long. So let’s get to it!

Planetarium

In anticipation of the pending release of Firefox 4, this CSS3 demonstration shows off the power of transitions. Until FF4 is released, check it out in Chrome or a similarly capable browser.

Apple’s Role in Japan during the Tohoku Earthquake

We love their products, but it’s behavior like this that can make you love a company.

Configuring the Viewport

An enormous amount of detail about the “viewport” in Safari on assorted platforms and how to make it play nice with your site or application.

Open Source Ampersands

Exactly what the title says: Mark Pilgrim put together a page of single-character ampersand fonts that can be used on the Web. Because…

D3.js

A new JavaScript library for manipulating Web documents based on data sources. Now we’re just dying for a need to use it!

How an Illinois Rest Stop Inspired a Web Page

The folks at 37Signals remind us that inspiration can be found anywhere in life.

The federal government is considering new legislation to allow users to opt-out of online tracking. The concept is similar to the national “do-not-call” list–allowing citizens to choose not to receive targeted marketing messages when online. Understandably, this has generated a good deal of concerned buzz in the online marketing world. Tracking an online user’s behaviors, website visits and content views has long been the holy grail of online marketing. The idea is that gathering all of this data on a user will allow marketers to display messages targeted to the specific user’s interests to increase the likelihood of conversion.

In anticipation of new legislation, a number of browser makers have already begun to take action to implement systems to support a “do-not-track” list. More…

One of the most revolutionary aspects of the Internet has been the ability for customers to self-serve on company websites. Rather than standing in line or waiting in a phone queue, a customer can log in to a website and immediately begin managing their relationship with the company. It may be paying a bill, changing communications preferences, updating a phone number or street address, or even tweaking the settings of a service. By 2011, most companies with these types of customer interactions have introduced a way to perform them online.

Just having the service online doesn’t mean it’s an easy or good experience for the customer, though. Companies want their customers to use online self-service because it greatly reduces costs through fewer calls to the call center, less re-keying of data and more reliable data. As such, it behooves a company to put a concerted effort into making their online self-service features as quick and painless as possible. More…

If an App Is Your Content Strategy, You Are Doomed

Bloomberg takes a look at newspapers and magazines that considered the iPad their savior.

Storyboarding iPad Transitions

Greg Nudelman walks through the amazing detail of iPad (and iPhone) animations and shares his thoughts on how to document their design for developers.

How To Build A Mobile Website

This deep dive from Smashing Magazine includes a lot of often-overlooked details of implementing a mobile website.

Progressive Signup: A Better User Signup Process

QuietWrite segments their users by step of the sign-up process to provide a low-effort account creation flow.

This Shell by the Gamits

Similar to what the Arcade Fire did a while back with incorporating video and HTML5, this hit the webs recently. It was created by some very cool folks at Legwork Studios as well as the Denver band, The Gamits.

Controlling text size in Safari for iOS without disabling user zoom

456 Berea Street takes a look at the intricacies of text scaling and orientation changes on iOS.

iOS Icons Made in Pure CSS

A stunning collection of iOS icon replications made purely with CSS. Be sure to use a webkit browser to check these out.

Learn HTML5, JavaScript and CSS With Mozilla’s Free “School of Webcraft”

Mashable runs down Mozilla’s expansion of their School of Webcraft to 30 classes.

Five UX antipatterns to avoid when designing Log-in & Registration areas

Harry Brignull uses real-world examples to remind us what NOT to do when designing log-in and registration flows.

Apple engineer re-creates ancient computer with Legos

I remember using a computer to control Lego models back in school. Now the computer itself is made of Legos!

Mies van der Rohe Society

An appropriately stunning website for one of history’s greatest designers.

Telescopic Text

A new take on “progressive reveal”.

iPhone and iPad now support TrueType font embedding. This is huge.

Jeffery Zeldman offers a quick run-down on TrueType support in iOS 4.2.

Elsewhere in the iOS Fonts world…

iOS Fonts tries to maintain a list of the fonts supported on the iPhone and iPad.

Google and Microsoft cheat on Slow-Start. Should you?

Ben Strong provides some interesting investigation on how Microsoft, Google and others violate RFC-3390 to decrease page load time.

Editorial SEO: Get an introduction and best practices.

An overview of SEO tactics for writers and editors by Rob Flaherty.

Farbzauber

Fun JavaScript technique for creating coloring book versions of your image.

Why professional logo design does not cost $5.

Jacob Cass explores what kind of logo you can get at what cost.

Design for content management systems.

Smashing Magazine offers some tips on optimizing your website design for a content management system.

Find your way with static maps.

Guidance from 24 Ways on implementing static maps using the same techniques you use for dynamic maps (and why you might want to do such a thing).

University websites do it all.

Based on our experience in the higher-education space, XKCD hit close to home.

Review the history of CSS Resets.

It doesn’t seem like CSS Resets have been around that long, but Michael Tuck starts a three-part series on them with a great history.

Ben the Bodyguard brings news.

Awesome site introducing a forthcoming app for the iPhone and iPod Touch.

Chrome 7 overtakes IE7 to become the world’s third most-used browser.

Sitepoint’s latest data shows that Chrome is rapidly gaining usage.

Firefox Live streams warm fuzzies.

Finishing up with the cutest additions to the Web community this week, courtesy of the Mozilla Foundation.

Tips for creating enterprise-level HTML, CSS and JavaScript

A facetious series of observations, documenting coding practices often employed on corporate websites.

Making Ads That Whisper to the Brain

The New York Times reports on the integration of neuroscience into the advertising world.

Netflix Usage

LukeW offers up the latest usage statistics for NetFlix including a fascinating note that NetFlix accounts for 20% of U.S.-based, downstream internet traffic at peak times.

Why Facebook badly needs Steve Jobs

An assessment of Facebook Messages and the opportunity that Facebook [may have] missed.

Steve Jobs: The Top & Bottom

Another entry from LukeW summarizing a John Sculley interview with Steve Jobs. A concise realization of the top-to-bottom approach that makes Steve Jobs so exceptional.

Apple Destroyed Products

A gorgeous gallery of destroyed Apple products. The patterns, colors, and textures in here are marvelous. (I’d link to the English version, but the UI needs a little help there)

Griffin Snap

A simple, imaginative re-use of another company’s product.

20 things I learned about browsers and the web

Google’s web book does an outstanding job of describing both the basic and complex components of the internet and web browsers in a very clear fashion.

10 Times more Google Apps

Google has released a multitude of new apps into their Google Apps suite. We use Google Apps and are excited to see what opportunities these present us!