3by9

How To Scare The Hell Out Of iPhone Users

I was talking to some people today and came up with a scenario that I think is a real issue, one that would be difficult for Apple to stop.

Here’s a scenario:

A fun game is released to the iPhone App Store and it’s free. When you finish your game, it asks you if you want to publish your high score to the Internet. You choose “yes”. While it sends your score, it also sends your entire contact list up to a web server to be sold to spammers.

Think it can’t happen? It can, easily. It’s actually pretty trivial to write code to do this since Apple’s iPhone APIs are so thorough. A quick look at the Address Book Programming Guide for the iPhone will have you accessing the user’s contact list in no time in just a few lines of code. In a few more you can check for network connectivity and send the serialized contact information to any URL you want. Simple.

It would be difficult for Apple to catch this as they don’t reverse engineer your applications before approving them. You don’t submit your code, just your compiled file, so by just opening and looking at the application it’d be impossible to find a problem like this. You’d just have no idea.

I’m not advocating that people should do this, but it’s certainly something to think about. How would you know? One of the iPhone’s first hit games, Aurora Feint, did something less sinister with your contact data and was pulled from the App Store after people found out (ironically you could notice the issue if your iPhone was Jailbroken and you could peek into the directory data.) The only reason people found out was because Aurora Feint was re-storing your contacts’ data in another location which some iPhone programmers noticed. If they didn’t re-store it and simple sent the data, would anyone have noticed?

The newness and popularity of the iPhone platform leads me to believe that some people are currently working on nefarious ways to make money from unsuspecting users. When there’s money to be made, people will try to make it, no matter how immoral the means.

iPhone OS v3.0: Springboard Overhaul

The iPhone App Store is growing so fast that the original interaction design of the iPhone’s home screen — “Springboard” — is totally outdated. It needs an overhaul.

In case you’re not familiar with the iPhone’s iconic home screen, there are 5 rows of icons, 4 icons per row, and the bottom-most row has a special background behind it. In a previous version of the iPhone OS, you couldn’t re-arrange the icons and the four in the bottom row were stuck there permanently. Fortunately, Apple took the hint and did what Jailbroken iPhones had been doing for months — allowed you to re-arrange the icons to your liking — mainly because of the launch of the App Store and thousands of applications.

I currently have 4 screens full of apps, and I’m not really an “App junkie” either. I know people that have maxed out their screen real estate with double the screens and many times more applications than I.

There are many issues with the current configuration:

• Takes too long to scroll through pages, can’t access applications quickly.
• Every application icon has a similar shape so beyond the icon’s design, there’s no other distinguishable characteristics for identification.
• No way to organize your applications in any meaningful way.
• Only one “important area” where apps stay put, at the bottom. Apple chose this, not users.

With the App Store growing by leaps and bounds every day, there’s bound to come a point (very soon) where users are just going to accumulate too many applications and will stop downloading & buying new ones because they don’t have room. Not “storage room” within the hard drive, but physical pixel room. That’s not a good problem to have.

So what’s the solution? Here are my ideas:

• Make any application icon “sticky” so that it it stays put when you scroll to see other applications.
• Some kind of tagging or folder UI so that I can group Games with other Games and flip right to where all my Games are in one easy motion.
• Gestures would be nice. Swipe up to launch one application, swipe down to launch another.
• Drawers that can be accessible on all pages. Instead of clicking 3 times to get to the page you want, you always have access to a drawer tab that will immediately show a group of applications for quick access.

I don’t have all the ideas, and this is a very difficult problem, but I think it’s a start. I’m sure Apple engineers have been working on this for awhile so I expect to see an update at some point in the future. It’d also be nice if my background image could be shown in the Springboard background (like on my Jailbroken iPhone!) but hey, I’d settle for just a better interaction scenario.

There’s A Niche, You Just Have To Find It

A few weeks ago I talked about starting a new blog, Flyosity, and the ideas I had for hitting the ground running. Those ideas mainly revolved around small tweaks I made for search engine optimization purposes, so in this post I wanted to talk more specifically about content decisions and how things are going so far.

Focus

My focus is on Mac-related interface design topics:

• Icon design
• Mac software interface design
• iPhone software interface design

So far I’ve been pretty faithful to those broad topics, nailing at least one in each entry I write. Why those topics? I felt they were under-served at the moment. There are some great forums that focus on these topics (MacThemes, Jelly Labs come to mind) but not many individual voices I could read on a regular basis. Don’t get me wrong, there are some serious all-stars in the Mac and iPhone design community (I try to follow them all on Twitter) but they tend not to post highly-descriptive articles about their work. An icon release is fantastic, but for Flyosity, I wanted to talk more about why and how an icon was created, not just the release of it. I wanted my blog to be centered around learning and not just observing, mainly because I’m still learning.

Talk About What You (Sorta, Kinda) Know

I’ll be the first to admit that I’m still working on my photorealistic design skills, icons included. I’ve been designing for the web for so long that the transition to software design is taxing me a bit since much of it is new. Designing high resolution icons? Not something I’ve really done before, but that’s just the topic I want to cover on Flyosity as I think it’s interesting and challenging, especially to a newer designer. My goal is to put out as many tutorials as I can, mostly because it forces me to learn a particular technique so that I can write about it. Last night I posted an icon tutorial and it was something I’ve never really drawn before. As I wrote the tutorial I was learning as I went.

Google’s Been Kind

Because the topics I’m targeting aren’t very saturated yet, I’ve been able to slide up the results rankings for my key terms. At the moment I’m on the first page for “mac interface design”, “iphone interface design”, and “interface design blog” which is perfect for the content I’ve been writing. My site still has a PageRank of 0 but since there’s not a lot of similar content out there, I’ve been climbing up the results. I’d like to think that my SEO-related tweaks I made to my HTML source contributed but who really knows.

Guiding Your Audience With Twitter

I was a late-comer to the Twitter party. I signed up for an account early-on (user number 10,000 and change) but never really touched it until the past few months because I just didn’t see the value.

In the beginning everyone was using Twitter to post what they were having for breakfast, or how cute their dog was — typical LiveJournal type junk. That didn’t appeal to me so I left it alone.

Over time, and without me posting much at all, people started following me on Twitter even though I rarely updated. I slowly got a couple hundred followers, and before I knew it, I had an audience.

As soon as I saw that I had an audience, I decided I might as well give them something interesting to read, so I started posting.

What I post on Twitter may not be exactly what everyone else posts. I rarely post about where I am, what I’m doing, what I’m thinking, or with whom I’m hanging out. What I do post on Twitter are links to interesting things I’ve found plus a little bit of commentary about those links — like Delicious with 1-sentence descriptions. Here’s an example of what I like to post on Twitter:

Download “pinvoke” set of 1000 free icons: http://idek.net/hD …better than famfamfam I’d say. I’m gonna use these starting immediately!

The reason I posted that is because in my regular travels around the Interwebs I stumbled upon a link that I think my audience would appreciate, mainly because my Twitter audience is made up of designers and web people. My normal action is to link it up in a new Twitter post (a tweet if you like that word, which I don’t!) but instead of saying “Hey, check this out: ” which a lot of people do, I like to show some of my personality and enthusiasm in the few words I get before and after the link.

I use a URL shortening service called idek.net that’s run by my friend Adam (and I’m in the process of redesigning it, check the mockup) and not only does it shorten your URLs but it also gives you detailed click-through statistics on every link you create. By seeing how many people click on my links, what time they click, and how they re-tweet or re-link it, I can figure out what types of links my audience likes to see. This has been integral in knowing what will get people interested which gives me some insight into what links work best with my Twitter audience and which don’t. What works best? Practical design and web development articles that can be immediately applied to someone’s work. Tutorials, downloads, how-to articles, and new ideas that can be useful when building websites and software. I wouldn’t know any of this without using idek.net so if you want to know how your audience is responding to your links, I highly recommend it.

The Fun Part About Starting A New Blog

I haven’t started a new blog (where I’d be the sole writer) since 2003 and that was for my old Typepad blog that I keep up for posterity. This blog and others I’ve written on weren’t totally ran by me, so there wasn’t a whole lot of room for experimentation.

I created a new blog on a domain I’ve owned for awhile and it’s really a great experience, one that I haven’t had in awhile. The blog’s design isn’t totally finished yet so I won’t be linking to it in this post, but I wanted to talk about some of the decisions I’ve made already and why I made them.

Archives

Leading your visitors around your blog, showing them the various articles you’ve written in the past, this is all very important… if you’ve got articles to show them. With my new blog I don’t have much content up yet so creative archiving isn’t a key concern for me right now. What is a concern is setting the hierarchical and naming groundwork for moving ahead when I do have a few dozen entries under my belt. What am I talking about?

• Individual entry URL naming scheme
• Categories, tags, and choosing a URL for them
• Monthly or yearly archives? Both? Neither?

For post organization, I’ve chosen to have a small number of categories (about 5-6 or less) and to keep them fairly high-level. Tags will be used mainly for metadata, but I’ll get into that later.

My URL scheme for individual articles is http://domain.com/category/title-of-entry.php, a pretty standard convention. The /category will be the most important category on the entry. Entries will be posted into 1-3 categories, but I’m choosing 1 above others to deem the most important and this will go into the URL.

Right now I’ll be forgoing date-based archives in favor or category-based archives and pagination off the homepage.

Search Engine Optimization

To me, SEO is fun. Google’s ranking algorithms are like a black box, and different SEO techniques allow me to try things and see how they work within Google’s universe. If they don’t work, I tweak until I get a better result — trial and error. I’ve read enough blog entries and articles about SEO to know a bit about what things I need, so now that I’ve got a new blog I get to try them out from the start.

Here’s what I’m concentrating on in no particular order:

• Utilizing H1-H3 in a topic-focused manner
• Website title
• Focused meta keywords and description

I’m a junkie for semantic HTML and it works out great that Google pays so much attention to it. It’s really important for your H1, H2, and H3s on the page to be as descriptive as possible and related to your overall topic. My overall topic happens to be Mac and iPhone-centric user interface design, so I made sure that within my website title and the main H1, it’s clear to search engines what I’m focused on. By using image replacement techniques, I can easily show a logo to site visitors while at the same time displaying my semantically-rich H1 text to search engines.

My website title doesn’t have the name of my blog as the first word, it’s near the end. I’ve seen a few websites doing this lately, namely 37signals, most likely in an effort to win top placement on particular Google searches. My niche is pretty small and focused (software interface design, not web-based) so I’m using the same technique and will see how it goes.

There’s a great WordPress plugin called All In One SEO that automatically generates your META keywords and description for you, so I incorporated similar functionality into my new blog. On individual entry pages, the description is the first 30 words of my post plus an extra 5-word sequence related to my topic, and the META keywords are the tags that the entry was placed in. I don’t display the tags in the blog’s design, those are 100% for my META keywords, so I can be a bit more focused. I try to keep the maximum number of tags on an entry (aka META keywords) to 8 to keep them relevant.

The fun part about SEO is that for someone who’s not an expert in the field, it’s really a big experiment. The ideas I have implemented here will take a few weeks to bear fruit, and if they don’t, then I’ll mix some stuff up and try again!

Top 5 Coolest Pieces Of Blog Metadata To Design

This past weekend I was in Charlotte attending their Wordcamp conference and spoke on the Design/Technical panel. Each presenter put together a Top 5 (or 10) list and then based their talk on that. Here’s mine:

(Here’s a link to the larger version.)

Designing Blogs

Designing a blog is similar to designing any other type of website in many ways, but to me I always found it far easier, far more creative. The reason I like designing blogs is because of all the data you get “for free” as soon as you publish your first entry. The time and date it was published, categories, tags, comments, who published it, metadata buried in the entry, the list just keeps going and each piece of metadata is something you can use creatively to add to your design.

In my talk I came up with my 5 favorite pieces of metadata to work with when I’m working on the design. Information visualization is something I’m really interested in so some of the examples in the slide are things I’ve actually used in the past. The bars showing how many entries a categories has is extremely useful. The comment badge that gets fuller and larger depending on how many comments it has, I used that a few years ago and have always wanted to pull it back up.

The audience at the event was less technical than I assumed it’d be, so I pulled out a lot of my semantic metadata jargon and just focused on the possibilities. One thing I glossed over during my talk was how to link tags together to form a semantic mesh of information. Here are some psuedo-steps that you could use to code up something similar to this:

1. List all the tags an entry has.
2. For each tag, find all other entries you’ve posted that are also using that tag.
3. For each entry you find, find all the other tags that it also uses. Each of these tags might be considered a related topic to the original tag.
4. Use a Javascript visualization engine to plot the relationship between those tags and entries.

Connecting metadata is a powerful way of showing users how information relates to each other, even when it’s not totally clear what the relation is.

Designing With Blog Data

This coming Saturday I’ll be speaking on the design panel over at the Charlotte Wordcamp event in the building of the Charlotte Observer newspaper. It’ll be a lot of fun, and it’ll be good to talk about blog design again.

Designing a weblog is a lot of fun, and one of the reasons I love working with blogs is because of the sheer amount of information you can work with for the design.

When designing websites for clients, the big issue I’ve had to deal with is the lack of data you have to work with. Normally design mockups have lorem ipsum dolor text strewn throughout as there is no real text to work with yet, and very little information you can design. Design is about arranging information, and if you don’t have any information, then it’s an uphill task.

Blog design is the complete opposite. Here are some things you get for free when designing a blog. Numbers and data that you can work with when crafting the interface:

• Authors
• Entry dates and date formatting
• Categories an entry is posted into
• All the blog’s categories and sub-categories, and how many posts have been made to them
• How many posts in the last 30 days, the last 90 days, the last year, etc.
• Tags and tag clouds
• Related posts
• How many comments an entry has
• Recent comments
• Total number of comments, or number of comments in a date period
• Posting frequency

When designing a blog, you automatically get a ton of information to use by default. Mix up the information, blend it with other data points, design something useful and interesting. Draw some graphs, some charts, some relationship diagrams. There’s a ton you can do.

My presentation this weekend will be focused on cool data visualizations you can do with a blog. Charts, graphs, ways to organize information, layout ideas, all surrounding the concept of working with a blog’s metadata to enhance the overall design. No more lorem ipsum text when designing a blog, just work with what you’ve got.

Sorry, Wingers: Not This Time

The election is nearly over: tomorrow is do-or-die day, the culmination of nearly 2 years of campaigning. Promises have been made, new faces have been introduced, people have been scrutinized, and lies have been told. Most of these lies have been told by the Conservative right wing.

Republicans are very good at winning, there’s no doubt about that. As a Democrat who has spent the majority of his voting life with George W. Bush in office, I’m basically accustomed to losing. Democrats lost in 2000 and 2004 for various reasons, one of those being that our candidates simply lacked charisma, but another much larger reason is that Republicans will do anything to win. Anything. They will say anything and do anything to win. They’re very good at seeing what needs to be done to win an election, and doing it, regardless of the costs.

In 2000, during primary season, Bush’s campaign crew unleashed the most vile, unbelievable smear campaign against John McCain and destroyed his political chances that year. One smear was distributing a letter calling McCain “the fag candidate” to scare Christian voters away thinking that McCain was pro-gay and would hire homosexuals into cabinet posts.

Another far more dastardly smear is detailed in the following quote by Rick Davis, McCain’s current campaign manager. Here are his words from 2004 about the 2000 Presidential race:

It didn’t take much research to turn up a seemingly innocuous fact about the McCains: John and his wife, Cindy, have an adopted daughter named Bridget. Cindy found Bridget at Mother Theresa’s orphanage in Bangladesh, brought her to the United States for medical treatment, and the family ultimately adopted her. Bridget has dark skin.

Anonymous opponents used “push polling” to suggest that McCain’s Bangladeshi born daughter was his own, illegitimate black child. In push polling, a voter gets a call, ostensibly from a polling company, asking which candidate the voter supports. In this case, if the “pollster” determined that the person was a McCain supporter, he made statements designed to create doubt about the senator.

Thus, the “pollsters” asked McCain supporters if they would be more or less likely to vote for McCain if they knew he had fathered an illegitimate child who was black. In the conservative, race-conscious South, that’s not a minor charge. We had no idea who made the phone calls, who paid for them, or how many calls were made. Effective and anonymous: the perfect smear campaign.

—

The smears that the Conservative right have used against Obama are numerous. He’s a Muslim. He’s a terrorist. He hates America. His supporters aren’t “real” Americans. His supporters hate America. He’s not one of us. He’s not an American citizen.

Through all the smears and the name-calling, Obama has kept his cool. When asked about the things that the McCain campaign is throwing at him, the names they call him, he laughed and said he’s been called worse things on the basketball court.

He just laughed it off.

The wingnuts threw everything they could at Obama, and he stood tall. He gained ground on subjects that were considered McCain’s strong points. He looked like the experienced one as McCain chose Palin to be his VP. He won all the debates, including the “town hall” debate where McCain was supposed to be at his finest. Obama stayed calm in the face of an economic collapse while McCain suspended his campaign and flailed around.

Obama is the one who looks Presidential.

Tomorrow, Obama will be Presidential.

Sorry, Bloglines: You Suck

Just a few weeks ago I wrote about how the iPhone version of Bloglines was my new choice for feedreading since it’s fast, fast, fast.

Oh how things change.

Turns out, Bloglines has been having feed updating issues for awhile that I was totally unaware of until reading a blog entry over at TechCrunch about it. I decided to check some of my feeds that — I assumed — hadn’t been updating their sites much recently and was surprised to find out that they’ve been writing blog entries all along, but Bloglines wasn’t updating their feed so I had no idea.

Speed in a feedreader is great, but actually showing the content is the #1 priority. I had to go back and read a month or two of archives from almost a half-dozen sites I subscribed to just so I could see what they’ve been posting because Bloglines let me down.

Sorry, Bloglines, you’ve let me down and I’ve switched to Google Reader.

I’m just one person that’s switched, but you know what? I’m an important Bloglines user. I’ve been using Bloglines for over 5 years! I can’t name any other web service that I’ve been using for that long. When I first started to fall in love with Bloglines I even emailed them offering them a donation since I loved their service so much. Over the years I’ve evangelized them when everyone else was switching for Ajax-powered feedreaders.

Not anymore.

I miss the interface of Bloglines as it was so familiar to me. The Google Reader UI is decent but it is going to take some getting used to. I have no doubt that my brain will become accustomed in no time.

Feeds On My iPhone

I don’t care how many people say that the iPhone version of Google Reader is fantastic, I think it sucks. It sucks compared to Bloglines’ iPhone version which is streamlined and fast as all hell. Fortunately I found a way to view my Google Reader feeds on my iPhone using a native app, and that app is Byline by Phantom Fish . Its interface is extremely polished and beautiful, like an Apple-designed iPhone application would look. I actually like Byline more than I like Bloglines’ iPhone version and Google Reader’s normal version! It’s that great.

Bloglines, but you’ve been replaced.

Using HTML, CSS, and Javascript For Everything

To be honest, working in Objective-C and using the rich set of Cocoa APIs is difficult for me. I wasn’t a computer science major in school and never learned much about pointers or header files (thanks to 3 quarters of Java that I never used again) so it’s all a brand new landscape. I’ve learned new programming languages on my own before but they were higher-level constructs unlike C and Obj-C.

I downloaded the iPhone SDK the day it was unveiled and spent 5 hours reading about Cocoa and Obj-C on Apple’s Developer site. I absorbed it like a sponge, reading through all Apple-supplied example apps line by line trying to understand their magic. I put some views together, made some things happen, but had tremendous difficulty moving ideas in my head into code using a language I’ve never worked with, and I got frustrated.

It was frustrating mainly because I can do nearly anything I want to do inside a browser — any design, any user interaction scenario. I’ve been using CSS to create interfaces on the Web since 2002, HTML & Javascript since the late 90s. A web page is my canvas and I feel no limitation to what I can create. I rarely get bogged down in implementation details when creating something new on the Web, I mainly just dream it up and start making it work, thanks most recently to jQuery making Javascript fun again.

One of the first things I did after downloading the iPhone SDK was create a little application that loaded an HTML file from within the bundle into a UIWebView. This allowed me to use HTML, CSS, and Javascript to create something that loaded locally (aka, very quickly) and ran inside of a native iPhone application. After I became a little more comfortable with Cocoa, I wrote some hackish code that 1) was notified whenever a link was clicked, 2) stopped the new URL from loading, and 3) instead called a particular native method based on the string which returned its results by using stringByEvaluatingJavaScriptFromString to send it back to the HTML page. This allowed me to do some cool things like use JavaScript to call a native Cocoa method and then manipulate the results of that call. For desktop-based OS X apps, this is trivial as you can access the WebView directly via a WebScriptObject, but in the iPhone SDK there’s no such thing. I had to jump through some serious hoops to get JS talking to Cocoa, but in the end, it worked.

And that got me thinking.

Many people are unaware that HTML & CSS are used in popular desktop-based applications, in such ways that you’d probably never know they were being used unless you looked hard enough. Here’s a quick list of some apps that use HTML & CSS in interesting ways:

• Apple Mail — When you’re reading an email message, you’re reading it in a WebView. Many emails come through as HTML nowadays so it only makes sense to render the message directly as HTML. This is how Apple can do such innovative things with message templates — it’s all HTML & CSS.
• Help — In OS X, most applications display their Help pages (accessible via the Help menu in the menubar) as HTML.
• Safari/WebKit — I use the Web Inspector all day long when debugging Javascript, and it blew me away when I realized the entire thing is written in HTML, CSS, and Javascript. If you want to see some of the most precise and interesting CSS & Javascript you’ve likely ever seen, right-click within the Web Inspector and go to “Inspect Element” to view the source code of the Web Inspector itself.
• Firefox — One of the most interesting uses of CSS happens to be staring you in the face right now if you’re using Firefox. The entire interface of Firefox (toolbars, buttons, Find, etc.) are all styled using CSS applied to XUL, and XML-based interface definition language. When you use Find to search for text inside of a web page, the action that pops up the little Find box on the bottom of the window is actually just a Javascript call to change the display from none to block, just like you’ve used a hundred times before. This is actually what makes writing a Firefox plugin so appealing to web developers, because in the end you’re using CSS and Javascript to build your design and functionality.
• Dashboard Widgets — You probably already knew that OS X Dashboard Widgets are just HTML, CSS, and Javascript, but you didn’t, go check them out again and see the level of interface detail you can achieve with stuff you already know how to use. Hint: if you view the package contents of a Widget’s bundle you can dive into the HTML, CSS, and Javascript code of the Widget to see how it works its magic. I’d highly recommend doing this for some of Apple’s beautiful widgets.

Use What You Know

The only reason that the list of desktop-based usage of HTML & CSS is so high is because Apple’s open source rendering engine WebKit is baked into OS X, allowing you to load an HTML file into your Cocoa application without breaking a sweat. Almost 5 years ago someone wrote a tutorial to build a web browser with one line of Cocoa code, so people have been using web-based display languages within desktop apps for a long time.

Over the years, WebKit has gotten a lot more powerful and its new Javascript engine is the fastest in the business. If you pack HTML, CSS, and Javascript into your application bundle and load it locally into a WebView, depending on the complexity of your code, it renders only a touch slower than if you built it using Interface Builder. Matt Gemmell even put out some code that lets you change your desktop-based application’s interface live by swapping CSS files.

This kind of stuff just blows me away. Design your interface using XML/HTML & CSS, hook up your behaviors to Cocoa using the WebScriptObject (call Cocoa from Javascript) and then only call Cocoa when you need to do some heavy lifting. Bake it into a desktop-based application by using a WebView, compile, and deploy.

I’ve been looking back on the ideas I had a few months ago that I struggled to reproduce using Obj-C and Cocoa and now feel confident that I can build them using what I already know. The idea isn’t a 3D adventure game or a photo manipulation app, it’s just something that’s useful, and I think using HTML & CSS to build it into a native app would be a perfect way to turn it into reality.