I've been iterating on mockups for people focused mobile communication for a while on the IndieWebCamp wiki for my own publishing tool Falcon, but the mockups deserve a blog post of their own.

Going back to the original people focused mobile communication experience, we've already figured out how to add a personal icon to your site so that visitors can choose "Add to Home Screen" (or similar menu option) to add icons of people (represented by their site) directly to their mobile home screens where they normally organize their apps.

The next step is to mockup what happens when they select an icon of a person and it launches their website.

Home page for iOS7

I started with a mockup for how I could present communication options on my home page when viewed on an iOS7 mobile device, figuring if I can create a seamless experience there, adapting it to other mobile devices, desktop etc. would be fairly straightforward.

Thus when someone selects an icon of a person and it launches their website, they might see a home page view like this:

This is a hybrid approach, providing a look and feel familiar to the user from their "native" environment (smooth, seamless, confidence invoking), with very simply styled web content right below it so if that's all they want, they get it immediately.

Home with contact options

Continuing with the user flow, since they want to contact you, they select the "Contact" folder, which opens up accordingly. From there the user selects which "app" they want and it launches automatically into a new message/connection, skipping any distracting inboxes.

The various contact options are presented in preference order of the contactee.

Each of these can be optionally hidden based on presence status / availability, or time of day.

A subset of these could also be presented publicly, with others (e.g. perhaps FaceTime and Skype) only shown when the visitor identifies themselves (e.g. with IndieAuth). The non-public options could either be hidden, or perhaps shown disabled, and selecting them would be discoverable way to request the visitor identify themselves.

This is enough of a mockup to get started with the other building blocks so I'm going to stop there.

I've started a wiki page on "communication" and will be iterating on the mockups there.

Got other thoughts? Upload your mockups to indiewebcamp.com and add them to the communication page as well. Let's build on each other's ideas in a spirit of open source design.

Next: URLs For People Focused Mobile Communication

I'm at IndieWebCampSF and today, day 2, is "hack" or "create" day so I'm working on prototyping people focused mobile communication on my own website.

A few months ago I wrote about my frustrations with distracting app-centric communication interfaces, and how a people-focused mobile communication experience could not only solve that problem, but provide numerous other advantages as well.

Yesterday I led a discussion & brainstorming session on the subject, hashtagged #indiecomms, and it became clear that there were several pieces we needed to figure out:

• Mockups for what it would look like
• URLs for each communication service/app
• Markup for the collections of links and labels
• CSS for presenting it like the mockups
• Logic for presence / availability for each service
• Client Platform Detection for conditional display of platform specific apps
• Contextual Tests for user time of day, calendar, do not disturb requests etc.

So that's what I'm working on and will blog each building block as I get figure it out, create it.