Vision
Waku Objects are an integral part of the Waku Play system — they are designed to be integrated into a host application. Essentially, chat applications provide a relevant social layer for accessing and using Waku Objects.
Put people first
In Waku Play everything starts with chats — not apps, not files, but people. Waku Objects leverage the social context defined by the chat they are inserted into. For example, sending money to someone with Payggy starts from a private chat, which defines the payment recipients details.
Augment conversations
Waku Objects extend and empower chat conversations with new features. Waku Objects functionalities should be built around, and combined, with the existing social interactions of the chat — not replacing them and not providing unnecessary distraction.
Integrate seamlessly
Waku Objects offer a unified and seamless user experience by being fully integrated with
the chat application. To that regard, it is important to understand how the user interface
is divided between the Waku Object and the chat application. The following sections of
these guidelines will explain how they are woven together.
Furthermore, to achieve the best consistency, Waku Objects follow the same visual design guidelines
as the application hosting them. For example in Waku Play, everything is designed using Dieter,
a flexible and open-source design system.
Inserting Waku Objects
Waku Objects instances can be inserted to any chat by opening a list view displaying all
available Waku Objects for that chat. Each Waku Object needs an icon, a name and a short
description.
For example, this is how the insert Waku Object list looks like on Waku Chat.
Icon
Waku Objects icons are designed in a square format. The primary icon fits in a 50% smaller square, center-aligned within the background container. Depending on where it's used, the icon might be cropped as a rounded rectangle, or circle.
Name and short description
The Waku Object name should be short and memorable. Use 25 characters maximum.
The Waku Object description helps people understand its purpose, in one short sentence. For
best results use 25 to 30 characters, but you can use up to 60 characters.
Standalone view
Waku Objects open in a standalone, fullscreen view. Typically, the standalone view is used
to configure a new instance when inserting it to a chat, or to manage an existing instance
with full control. In standalone view, the Waku Object uses the entire area of the screen,
so there must be a close button in order to get back to the chat application.
These guidelines will cover layout principles for the setup flow and instance management of a
Waku Object.
Setup flow
The setup flow layouts are used to configure a Waku Object instance properties, when inserting into a chat. They follow a step-by-step logic, dealing with one piece of information at a time.
There can be as many steps as needed, but try to keep the setup flow as short as possible. Once all the required info has been submitted, a summary screen is displayed. The summary screen contains all the submitted information, along with some optional additional information.
The summary screen allows people to review all submitted data, before inserting the Waku Object to the chat. It is possible to edit a specific entry directly — without having to go through the whole flow again.
In that case, the specific step is displayed, with a “Save changes” button allowing to enter the correct information and go back to the summary view.
Instance Management
Once a Waku Object instance has been created and inserted to a chat, the “instance
management” view allows people to access all the functionalities of that Waku Object, in
fullscreen.
Every Waku Object is different and needs to be designed specifically, however, here are some
structural guidelines and building principles on how to approach the design.
Active menu
The active menu provides activity notifications and direct access to the standalone view for active instances of Waku Objects — even when chat widgets are no longer visible on the screen. Displaying notifications on the active menu is the prefered way for a Waku Object to communicate information and activity to chat members, because it is less obtrusive than a chat widget.
When there's only one active instance of a Waku Object, tapping on the icon will open the standalone view directly. If there are multiple active instances, then tapping the icon will display a list of the active instances.
Chat widgets
Waku Objects can post chat widgets to the chat. Chat widgets are fully integrated into the
chat conversation. A chat widget provides key information and quick access to the Waku
Object instance that posted it. In order to reduce noise and distraction, chat widgets are
used only for important information that require immediate attention from chat members. For
all other activity, you should display a notification on the active menu.
Below are some examples of chat widgets inserted into a chat view, in Waku Play.
Anatomy of a chat widget
Chat widgets are designed to be as compact as possible. They convey key information at a
glance, without taking too much space from the chat conversation. Because each Waku Object
is different, the information displayed by chat widgets will differ — however, you can use
the building principle explained below as a guideline.
Also, a chat widget needs to be integrated into a chat message format which is provided by
the host chat application. When designing a chat widget you control only the content part —
the header and footer of the message are provided by the chat application.
Development
This page is here to help you understand the principles and how to design your own Waku Object. For guidance about code and development please refer to the Waku Objects Developers Documentation on Github.