UI Mock-ups
rating: 0+x

Are you an artist? Share your brilliance for the TalkingPad user interface here.

(to upload images, use the "Files" link at the bottom of the page, then add the image to the wiki, by using the edit bar on the editor)

Navigation Mock-up

Navigation.jpg

The idea here is to be linear and non-linear. Whatever slide you are looking at is in the middle when you zoom out. This lets you navigate to any slide at anytime. If you flick left or right the presentation advances or retreats.

The "edge" here is that you are only allowed 9 slides.

dewittndewittn

Options Mock-up

options.jpg

If the slides change position if might be hard to know where all the other slides are. When you tap you should see a numbers indicating the location of each slide as well as other option.

When you pinch out you can see all the other slide in the grid format. Swiping from the zoomed out view could bring up a blank page.

dewittndewittn

Rotate Mock-up

rotate.jpg

I know what you are thinking the iPad rotates by its self. However this doesn't work when the iPad is laying flat on the table. It might be nice to be able to rotate the slide if the iPad is plugged in or something.

dewittndewittn


Comments

keithpeterkeithpeter 1266097202|%e %b %Y, %H:%M %Z|agohover

Nice sketches, it helps to see the layout.

How would importing content on the iPad work? Suppose I had students making a presentation about something in the news, how would they drag a picture onto a slide and add a bit of text under it?

Could each slide in the 9 slides have a link leading to another slide cluster? Perhaps a special gesture or an embedded hot spot or hyperlink on a piece of text?

Just noodling.

Reply  |  Options
Unfold by keithpeterkeithpeter, 1266097202|%e %b %Y, %H:%M %Z|agohover
dewittndewittn 1266164889|%e %b %Y, %H:%M %Z|agohover

Thanks!

I'm really not sure how the import process would work at the moment. I think thats a little more technical and I haven't done any development on the iPhone so I really can't say how it would work.

I thinking you could zoom out when looking at the grid view and see other grids of 9. However, it might be easier to ship with just one cluster of 9 to start. We don't want to bite off too much at the start. If its successful I'm sure there would be time to add more than 9 slides.

Reply  |  Options
Unfold by dewittndewittn, 1266164889|%e %b %Y, %H:%M %Z|agohover
jtadeojtadeo 1266182975|%e %b %Y, %H:%M %Z|agohover

dewittn, good job on those sketches. My take on it is slightly different. I just need a scanner to post my chicken scratches.

Reply  |  Options
Unfold by jtadeojtadeo, 1266182975|%e %b %Y, %H:%M %Z|agohover
Sample Presentation Pages
jtadeojtadeo 1266283343|%e %b %Y, %H:%M %Z|agohover

I used my digital camera (vs. a scanner) for this and it looks presentable enough.

Here's the page and sketch of what I am envisioning. As a reminder, nothing is set in stone and I invite any type of comment for improvement.
iPadSeth_fullpage1_1024.jpg

Here are some simple icon ideas that I thought of for the toolbar area.
iPadSeth_closeup_icons1_1024.jpg

This is how I see the presentation part. When you click on a box or page, it will automatically zoom.
iPadSeth_closeup_presentationpage1_1024.jpg

The page would have page edit functions that will take them into edit mode. I also notated the methods that would allow us to add additional functions if required.
iPadSeth_closeup_pageeditfunctions1_1024.jpg

The design above is for an iPhone app but can also be adapted to iPad.

Last edited on 1266283984|%e %b %Y, %H:%M %Z|agohover By jtadeo + Show more
Reply  |  Options
Unfold Sample Presentation Pages by jtadeojtadeo, 1266283343|%e %b %Y, %H:%M %Z|agohover
Re: Sample Presentation Pages
dewittndewittn 1266863833|%e %b %Y, %H:%M %Z|agohover

Hey jtadeo,

Thanks for sharing your thoughts about the interface.

I have a question about the navigation. If I'm zoomed in to slide 1 how do I get to slide 7? Would I have to zoom out and then zoom back in again?

Reply  |  Options
Unfold Re: Sample Presentation Pages by dewittndewittn, 1266863833|%e %b %Y, %H:%M %Z|agohover
Re: Sample Presentation Pages
jtadeojtadeo 1266907663|%e %b %Y, %H:%M %Z|agohover

On a zoomed slide, one can make a context menu. On select, it will open up to show the set of slides. The presenter would select the one they want and it would hyper to that particular slide.

Unfold Re: Sample Presentation Pages by jtadeojtadeo, 1266907663|%e %b %Y, %H:%M %Z|agohover
Re: Sample Presentation Pages
Rob (guest) 1276191422|%e %b %Y, %H:%M %Z|agohover

Woah, hold up there. The context menu is fine for additional functionality, but not fine for core functions. Navigation in a touch interface should, if possible, be by single direct actions like touching, swiping, etc.

Reply  |  Options
Unfold Re: Sample Presentation Pages by Rob (guest), 1276191422|%e %b %Y, %H:%M %Z|agohover
rearrange option
Amit (guest) 1266929693|%e %b %Y, %H:%M %Z|agohover

there should be an option to re-arrange the slides to the correct number order at any time. also it would be good if the app remembered the last unordered config you had and gives you the option to go to it at a click.

Reply  |  Options
Unfold rearrange option by Amit (guest), 1266929693|%e %b %Y, %H:%M %Z|agohover
Re: rearrange option
jtadeojtadeo 1267016618|%e %b %Y, %H:%M %Z|agohover

Amit,

That's a good idea. As an option, I think if we just "shake" it, it will go into the original intended order. A bit of a reversal as normal shaking will shuffle things around. But I figure shake things into place.

Reply  |  Options
Unfold Re: rearrange option by jtadeojtadeo, 1267016618|%e %b %Y, %H:%M %Z|agohover
Re: rearrange option
Rob (guest) 1276194698|%e %b %Y, %H:%M %Z|agohover

How about you shake to randomize because that just seems natural (though I'm not sure how useful randomizing the order is…); you pinch with all 5 fingers, gathering all the thumbnails together, then they spring back to their original positions. Also, at any moment, you should be able to (perhaps) touch and hold a thumbnail (this sequence is like the iPhone sequence where you move icons around), the thumbs start to jiggle and a popup menu lets you save the config.

So there's original config, random, manual, and saved configs.

-Rob

Reply  |  Options
Unfold Re: rearrange option by Rob (guest), 1276194698|%e %b %Y, %H:%M %Z|agohover
Add a New Comment
Page tags: design mockup
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License