23 Dec 2010
Designing the Squarespace iPad app has been a very rewarding experience. It's not just about adding features and graphics assets, it's also a balance between space and visual elements that don't create confusion. This might sound weird but here, more than ever, you find yourself having to remove instead of add.
Designing iOS interfaces on such a large screen, you are faced with immense freedom compared to the iPhone, but also more responsibility and hard choices. It is easier to make bad UI decisions when you have more space to run.
As for the iPhone app, I have tried to develop a consistent interface with the Squarespace identity: the theme and the interactions are pretty much the same as those, so it has a user friendly path to follow.
The user experience in this case is much more exciting, thanks also to the extensive use of smooth transitions in the interaction, to make the app more intuitive and natural. I tried to use animations where possible. Compared to the iPhone, iPad users catch more detail and visual elements. We have also implemented lightweight audio feedback, which gives the interaction a great advantage. I wonder why Apple does not implement audio feedback by default in iOS since interacting with multitouch interfaces means the elements are not so concrete. When used properly, sound effects can significantly improve the user experience.
The interface is treated in detail; typography and space balance are key elements of the UI.
I also tried to improve the concept of the tray that we used already for the iphone: having more space to show things, now you can keep the selected item visible while the tray opens below with a smooth animation.
Unlike the iPhone, almost all options appear in a popover. This increases the creative possibilities of the application, like adding advanced options in a single box without changing the screen.
Another significant part of the application is the statistics page. Thanks to the available space you could theoretically literally create your own widgets and arrange them on the page. We have interesting ideas that we are developing for future versions of the app.
Of course, I took inspiration from some of the best and most advanced interactions from the most notable iOS apps. In particular, the most successful in terms of usability, such as the Keynote (placement and removal of images), or Reeder ( pull to scroll up and down posts).
Note: The current state of the Apple SDK does not allow a complete control interface. So if you want to apply special effects or advanced text editing, you have to build it entirely yourself. Hopefully we'll do it in the next release!
We had to change some things during the design process but I think that the compromised text editor that we have created is great.
Squarespace on a mobile device like the iPad, more than others, appear to be the perfect place to this kind of service. When I started thinking about the interface of the app, it was quite natural to combine the features of the service (such as posting and writing) with the iOS interface.
In fact, I even like to think that it would be great if the Squarespace platform fully adapted to mobile multitouch interfaces. Imagine being able to drag and draw blocks and insert content simply with your finger; is an evolutionary approach to be taken into consideration.
The interface has been designed entirely with Fireworks, which I found had excellent resources for UI designers, such as their: iPad GUI PSD 1.0. All the individual icons were created in Adobe Illustrator.
As usual, I love to recommend used an application which I love so much: LiveView by IDEO, always great app for prototyping.
Thanks to our developer, Chris Cox, for the amazing work. And, of course, all of the Squarespace guys and beta testers, who all helped so much during the course of this project.
For more information check on squarespace.com.
Stay tuned and follow @myfavoritething (me) and @squarespace on Twitter.