Interactive Surface for CafĂŠ Wireframes
Wireframes for an experience prototype of a tabletop interface that enhances current and possible patterns in a typical coffee shop experience.
Last Revision: 2010-03-01
Interactive Surface for CafĂŠ
1.1.5
1.1.6
Men u 1.1.2
N
icon
ew
al
ap
sp
ic
on
n
er
ico
ci So
1.1.1
icon
list
Play
1.1.4
1.1.3
1.1 The Coaster
1.1.1
1.1.2
The hallmark widget of the table interface is the coaster which is the main menu. All applications are primarily accessed via the coaster. Those shown here represent a few possible applications. The coaster also provides feedback on the guest's beverage. The social tab represents the application through which in-shop social activities are engaged. The menu tab represents the application through which food and drink can be ordered.
1.1.3
1.1.4 1.1.5
1.1.6
The playlist tab represent the application through which in-shop music is engaged. The newspaper tab represents the newspaper application. A meter that displays different food and beverage related information (eg. estimated time of food/drink delivery, amount of beverage remaining, etc.). A space on which either a cup is directly placed or on which the widget centers itself. Essentially, a smart coaster.
Ta bl e
Su
rf
ac e
Interactive Surface for CafĂŠ
1.2 The Coaster, Context
Interactive Surface for CafĂŠ
1.3.1
1.3.2
1.3.3
1.3.4
1.3 The Coaster, Behavior 1.3.1 1.3.2
Guest places beverage [dark circle] on the surface outside of the coaster. Coaster responds, quickly moving into place under the beverage.
1.3.3 1.3.4
Beverage cup is rotated. Coaster rotates simultaneously as the beverage cup is rotated.
Interactive Surface for CafĂŠ
1.4.1
1.4.2
1.4.3
1.4.4
1.4 The Coaster Meter, Behavior 1.4.1
1.4.2
After the guest places an order, the meter 'fills up' from left to right, reflecting the estimated progress of staff in filling the order. The meter reaches its maximum, showing that the order should be arriving soon.
1.4.3 1.4.4
The fresh beverage [dark circle] is full. The meter calibrates and reflects this. As the guest consumes the beverage, the meter moves from right to left. When beverage is almost empty, the interface prompts guest for a refill.
Interactive Surface for CafĂŠ 2.2.1
2.2.2
2.2.3
2.2.4
Current Unit Current Amount Submit 2.2.5
2.1 Product-Amount Selector Ordering food--and especially coffee--is full of nuance. This interface is used to handle such nuance by allowing the guest to select a product type (creamer, sweetener, etc.) and how much should be added. 2.2.1
The 'high noon' position of the dial designates what items on the inner and outer rings are selected at any given time.
2.2.2
2.2.3
2.2.4 2.2.5
The outer ring represents available product types (creamer, sweetener, condiments, etc.). The inner ring represents available amount types (spoonfuls, packets, etc.). Color, in cases such as creamer added to coffee, could also be used to represent amount. A textual presentation of the product and amount selected at any given time. A button to submit the selection.
Interactive Surface for CafĂŠ
Current Unit Current Amount
Ta bl e
Su
rf
ac e
Submit
2.2 Product-Amount Selector, Context
Interactive Surface for CafĂŠ
Current Unit Current Amount
Submit
2.3.3 2.3.2
2.3.1
2.3 Product-Amount Selector, Behavior 2.3.1
Guest taps or drags desired product. If tapped, the outer ring automatically spins the desired product to the selection area at top of ring. If dragged, guest drags the ring until the desired product is in the selection area at the top of the ring.
2.3.2
2.3.3
Guest taps or drags the desired amount. Behavior of the inner ring is same as outer ring. See 2.3.1 for behavior. Guest taps submit to confirm the current product and amount. Interface returns to previous panel.
Interactive Surface for CafĂŠ
3.1.1
3.1.2
Now Playing artist image
3.1.3
Vote
Song Title
Song Title
Artist Name
Artist Name
Album title
Song Title
Year
Artist Name
Lorem ipsum dolor sit Buy Song amet, consec teturelit. Sed rutrum nisi in augue auctor non3.1.4 dapibus sapien gravida. Ut feugiat ornare tortor, quis dignissim sit amet, consec tetur adipiscing elit sed. 3.1.5
Song Title Artist Name Song Title Artist Name
3.1.6
3.1.6
3.1.6 3.1.6
3.1 Playlist Panel In a service economy, customization is king. Furthermore, the jukebox represents a social facilitator that has largely disappeared. The playlist panel introduces customization and even a social game mechanic via voting. 3.1.1
3.1.2
The Now Playing section contains information about the song currently being played in the shop. The Vote section allows guests to vote on what song should be played next.
3.1.3
3.1.4
3.1.5
3.1.6
A bar which is color-coordinated with the tab on the coaster by which it is accessed. The bar also allows user to drag the application around the surface. A button that allows guests to purchase a digital file of the song currently playing. (Song could be transferred to smartphone connected to the table.) Information about the artist/album/song. Trivia could be placed in the form of a question facilitating a simple game. Item in a list of songs to be voted on to be played next.
Interactive Surface for CafĂŠ
Lorem ipsum dolor sit Now Playing Vote Song Title amet, consec tetur Artist Name artist image elit. Sed Album title adipiscing rutrum Year nisi in augue auctor non
Song Title Artist Name
dapibus sapien gravida.
Song Title Artist Name
Song Title Artist Name
ac e
Song Title Artist Name
consec tetur adipiscing elit sed rutrum nisi in.
3.2 Playlist Panel, Context
Su Ta bl e
quis dignissim sit amet,
rf
Ut feugiat ornare tortor,
Ne ws
pa
pe r
Interactive Surface for CafĂŠ
So cia
t ylis
l
Menu
Pla
3.3.1
3.3.2
Now Playing artist image
Vote
Song Title
Song Title
Artist Name
Artist Name
Album title
Song Title
Year
Artist Name
Lorem ipsum dolor sit amet, consec tetur
3.3.3
3.3.5
Song Title
adipiscing elit. Sed rutrum nisi in augue auctor
Artist Name
non dapibus sapien gravida. Ut feugiat ornare
Song Title
tortor, quis dignissim sit amet, consec tetur
Artist Name
adipiscing elit sed rutrum nisi in.
3.3.4
3.3 Playlist Panel, Behavior 3.3.1
3.3.2
Guest taps or drags Playlist tab. If tapped, Playlist Panel appears within an automatic proximity of coaster. If the tab is dragged, an outline of the panel is shown while dragging to inform guest of the panel's potential position.
3.3.3
3.3.4 3.3.5
Guest terminates the drag and the panel transforms from the outline to its complete representation. Guest taps on a song listing to vote for it. Guest taps the 'x' to close Playlist panel.