Now that iOS 7 and OS X 10.9 “Mavericks” are on the horizon with a clear imperative to move away from skeuomorphism, it’s high time for us to redesign Speech Timer to be ready for the new look. Speech Timer is our Toastmasters timekeeping application, first introduced for (then) iPhone OS 2.0 and later on for Android mobile phones. This time on we’re planning to revamp it to provide full support for the iPad and Mac OS X and modernize the interface to be right at home with Apple’s upcoming human interface style.
In this article can see our preliminary mockups that shows how Speech Timer may look like. Keep in mind that these are work-in-progress and may change when the application is live. In fact, we’re keen to know how you think of these designs and whether you’d enjoy using it on your Toastmasters meet-ups.
iPhone & iPod touch designs
Timekeeping Screen
We’re taking out the faux metal and fake LCD display and replacing them with a clean style based off DesignModo’s flat UI color scheme. Emulating a hardware timer is a thing of the past – users have grown up and accustomed of using a touch screen thus faking a physical device is no longer necessary.
You can see from the screenshots below and compare Speech Timer’s old look with the new look. All decorations have been stripped out hence we save a good amount of screen space for real functionalities. The buttons are made bigger so that they’re easier to tap when you’re enjoying your colleague’s speech and the light indicators are similarly enlarged to make them evident from your peripheral vision.
Those screenshots above are for the 4:3 aspect ratio of iPhone 4S and previous generation iPhone and iPod touch devices. Whereas the screenshot below is designed for the iPhone 5’s taller screen and 16:9 aspect ratio.
Horizontal Mode
In addition to getting rid of skeuomorphism we’re also adding a horizontal “display-only” mode. When you rotate your iPhone or iPod touch horizontally, the timer controls and various other buttons will be hidden. Now the entire screen functions as a timer display that can be read at a distance. You can see the iPhone 4 and iPhone 5 variants of the design below.
iPad designs
In the iPad designs we enlarged the content portions of the display but kept the controls at the same sizes (more or less). Thus it’s more suitable for viewing at a distance but without wasting screen real estate for the buttons since the sergeant-at-arms will be operating it at arm’s length anyway (pun intended ^_^)
Timekeeping – Portrait
As you can see for yourself in mock screen below, the iPad timekeeping screen doesn’t deviate much from its iPhone counterpart. Colored lights indicators, numeric time display, speech type and orator have been enlarged while keeping the bottom row for use by the sergeant-at-arms to operate the iPad.
Timekeeping – Landscape
However when the iPad is turned on its side, we change the light display to run vertically. Otherwise there would be too much unused space on the sides of the display and we couldn’t enlarge the green/yellow/red traffic lights display. The numeric timer display will be repositioned to the top of the screen for easier glancing by the speaker at a distance.
iOS Secondary Display (AirPlay / display cable)
Nowadays iOS devices are able to output to a secondary display either through AirPlay or VGA/HDMI cable. If you’re lucky enough to be in a Toastmasters club that have a large television or LCD projector, you can make use of these to display the timer for everyone to see.
TV Out (16:9 ratio displays)
Modern television sets nowadays usually has VGA or HDMI inputs so that you can use them as a secondary display for your iOS device. Typically these are widescreen televisions with 16:9 ratio displays – that is when you divide the number of horizontal dots to the number of vertical dots in the unit, you’ll get a number close to 1.77 (which is 16 divided by nine). Here is one example mockup on how Speech Timer may use a television screen to display the timer and speech type.
Overhead Projection (4:3 ratio displays)
However many LCD projectors have a resolution of 1024×768 or even 800×600 – that is 4:3 aspect ratio. This requires a slight change in the screen design, since we don’t want to show any black bars at the top/bottom of the screen.
Mac Designs
Unlike iOS devices, Macs are capable of having multiple windows being shown at the screen and these windows can be resized. Mac notebooks tend to have a 16:10 aspect ratio screen whereas iMacs use a 16:9 ratio. Moreover the Mac Mini and Mac Pro doesn’t have any built-in monitor and can be attached to just about any resolution display. This makes designing the screen for the Mac a bit challenging.
However we’re taking a bet that most likely Speech Timer will be run on a laptop – hence assuming a 16:10 default aspect ratio. We also try to make the design a bit more flexible and allow the window to be resized.
Primary Window (Timekeeping)
You can see a sample screen design for the Mac version of Speech Timer below. We plan to use a chrome-less utility window to maximize the display area and minimize distractions. In keeping with the Mac, it uses Lucida Grande as the default font and not iOS 7’s default of Helvetica Neue Ultra Light. The indicator lights are made rectangular so that it can blend well with other applications on the Mac, should the user chose to run them at the same time with Speech Timer.
Secondary Window (Projection / Display only)
The primary window above works well even if you have a projector attached and chose to run it in display mirroring mode – where everyone else looking at the projection sees the same content as the one you’re looking. However if you prefer to use the projector as a secondary display, we also have something that you can use.
You can use the secondary window to show the timer without any controls that can distract the audience. This is similar to the secondary display screens found in the iOS’ version.
What’s On Your Mind?
So you’ve seen our plans for the next generation Speech Timer. The app will be iOS 7 / OS X 10.9 only and hopefully we can get them out just after those platforms are available to general public.
Now it’s your turn: what do you want to see in the next version of Speech Timer? Please let us know. Better yet enter your e-mail address below to be “in the know” of Speech Timer’s development or simply be the first to know when it’s ready.
PS: you’ll also get a free “Toastmaster’s Timer Sheet” if you sign up to the form above!