Using computers to message each other isn't exactly a new concept. From the dawn of networked machines, we've been using a variety of tools to communicate with each other. Be it email, IRC, IM, SMS, or one of the relative newcomers like social networks, group messaging apps, and persistent team chats like Slack, we've gotten pretty good at letting each other know what we're up to.

One newer wrinkle in this paradigm is human-to-machine messaging. Rather than using a messaging app to talk to another human being, your messages are being sent to a fully or partially automated computer script. These services can vary in complexity, ranging from something as primitive as a phone tree, or scaling all the way up to natural language processing with something like IBM's Watson.

These new services have started to be colloquially referred to as "Bots". Services like Siri and Slack have gotten people used to talking to machines, and so designers have begun to focus more attention on these new "Conversational UIs". There have already been a few interesting projects to come out of this new focus, such as the Lifeline mobile game, or Quart's new iOS news app.

That's where Bruno comes in.

Bruno

Bruno is a conversational UI concept that lives completely in your web browser. It loosely mimics the iOS Messages interface. It supports image attachments, gifs, emoji, and links. Rather than allowing full text entry, Bruno allows the user to choose from a fixed set of replies.

This UI mockup was a chance for me to learn a variety of newer web technologies, it probably won't work if your browser doesn't suppose ES2015. Bruno uses CSS3 Animations, Promises for flow control, Emoji One for cross platform emoji support, and Flexboxes to keep everything nice and centered. The messages are currently a fixed script of JQuery-parsed .json files, but he was designed modularly so that a more complicated message source could be implemented later.

I just referred to my program as a 'he'. The future is weird.

If you'd like to try out Bruno, feel free to use the embed below, or view it full screen here. His- err, the page's source is also up on Github.