Archive for the ‘Design’ Category

Matt McDaniel

(goodnews) New and improved emoticons

By Matt McDaniel | 2 weeks ago | 15 Comments

Here on the HipChat team, we take emoticons seriously. It’s really weird to spend a healthy portion of your work day discussing the finer points on tiny pictures from the internet. But when we see how happy those tiny pictures make everyone, it’s all worth it. Today, we want to tell you about a few ways we’ve improved emoticons in HipChat.

Emoticons for (allthescreens)

All of our global emoticons are now built to support hi-res displays, like Apple Retina displays and the higher end of the Android pixel density spectrum. This change resolved the much voted-on UserVoice ticket that we’ve had on our list for a while.

For every new image, we created hi-res sizes up to 4x (because you never know what the future will bring), so they’ll look good on both your fancy high-res displays and that old monitor your work won’t upgrade for you.  We’ve been rolling out these Retina emoticons over the last few weeks, and we’ll continue to tweak them every so often. Check out the big changelog below for details.

Sharing our favorites

Included in this latest release are a few of our favorite emoticons. Many, like (whoa) Keanu, were added because of your feedback. Others, like (disappear) and (salute), are ones we use so much around Atlassian that it didn’t feel right to keep them for ourselves.

  

Don’t forget that you can upload your very own custom emoticons just for your team. So next time you don’t have to wait for us to update the global set with (whoa) and can BYOK (Bring Your Own Keanu).

One size fits most

In addition to Retina-fying our global set, we improved our emoticon uploader. Now, admins can upload new, hi-res emoticons. And even better, we’ll automatically scale them for you. We suggest starting with an image around 120px (the new maximum). After the image goes through some emoticon uploader magic, you’ll end up with an effective 30px image after scaling.

We debated how to handle retina images. We chose this auto-scaling method because it’s far easier to upload new emoticons, or update an existing one, when you only have to create and maintain one size.

Protip: Keep in mind that whatever you upload is going to be scaled down 4 times, so a 1px stroke is going to be hard to see on a low-res monitor. We learned the hard way how much that can really effect line-drawing emoticons. That’s why you’ll see “beefed up stroke width” on a lot of the changelog below. It also helps if your image starts with dimensions that are multiples of 4 on both sides. For example: 116 px wide is great (116/4=29), but 115 px wide isn’t (115/4=28.75). 

And now that you can’t stand to look at your old custom emoticons on your Retina monitor, you can re-upload any of your existing custom emoticons by deleting old ones and uploading a new, larger versions. We’ll continue to refine and add to our global emoticon set.

The other “emoticons”

We also updated our set of little faces. Similar to the situation with the Retina emoticons above, we needed higher resolution images than the current assets allowed. We also wanted a new set of our own.

We started looking at emoji sets for inspiration and pulled in little touches from our HipChat brand, like using the logo smile shape as often as possible, and we ended up with a set that we really like. As with everything else, we’ll be iterating on them here and there, and someday may bring full emoji support.

Oh, and the icy blue corpse thumb thing we did is dead and buried. Dig it out if you want: (corpsethumb). We’re replacing the re-colored Apple emoji thumbs-up and thumbs-down with a new pair of icons that don’t look at all like Facebook. (badpokerface)

Check out hipchat.com/emoticons to see all the new emoticons and try them out with your team! And keep the feedback coming at help.hipchat.com.

Changelog

Changes made to global emoticons

  • (awyeah): beefed up stroke width
  • (badass): beefed up stroke width
  • (badjokeeel): added contrast and adjusted size
  • (bumble): added contrast
  • (caruso): adjusted size
  • (challengeaccepted): beefed up stroke width
  • (chewie): added contrast, brightened
  • (chucknorris): brightened up to bring out the Chuck Norris
  • (clarence): added contrast, brightened
  • (derp): beefed up stroke width
  • (dumb): enlarged to show face better
  • (facepalm): added contrast, tightened crop to improve chest to face and palm ratio
  • (fonzie): added contrast
  • (freddie): beefed up stroke width
  • (gangnamstyle): cleaned up gif
  • (gates): adjusted a little to match (jobs)
  • (goodnews): scaled up a little
  • (haveaseat): added contrast
  • (heart): updated to match smilies, adjusted crop
  • (ilied): lightened up to bring out details
  • (indeed): cropped to just face and highlighted monocle
  • (itsatrap): added contrast, brightened up to bring out detail
  • (jackie): beefed up stroke width
  • (jobs): adjusted to match (gates), added contrast and brightened
  • (joffrey): new image, fewer spoilers, more like the others (not shown above)
  • (kennypowers): added contrast and brightened
  • (krang): beefed up stroke width, reduced contrast between colors
  • (lincoln): brightened to blow out noise
  • (lolwut): added contrast and brightened, scaled up
  • (notbad): beefed up stroke width
  • (notsureif): replaced with (fry) to match
  • (philosoraptor): brightened to bring out detail
  • (present): added contrast and brightened
  • (reddit): removed white fill from antenna shape
  • (romney): added contrast and brightened
  • (sadpanda): using a sadder, more forward-facing panda
  • (samuel): added contrast and levels adjusted to stand out more on white
  • (skyrim): added contrast and brightened
  • (sweetjesus): crammed into (iseewhatyoudidthere)’s head shape to resolve weird corners
  • (taft): cropped closer to face, mustache volume increased, mustache/face contrast increased
  • (twss): added contrast and brightened
  • (wtf): enlarged to show face better
  • (yodawg): added contrast and brightened
  • (yuno): resized because he was too small
  • (zoidberg): resized because he was too small

New global emoticons

  • (awesome)
  • (aww)
  • (awwyiss)
  • (badtime)
  • (bicepleft)
  • (bicepright)
  • (borat)
  • (carl)
  • (catchemall)
  • (chef)
  • (cookie)
  • (corpsethumb)
  • (disappear)
  • (doh)
  • (donotwant)
  • (downvote)
  • (drool)
  • (evilburns)
  • (excellent)
  • (feelsbadman)
  • (feelsgoodman)
  • (finn)
  • (ftfy)
  • (giggity)
  • (goldstar)
  • (haha)
  • (huehue)
  • (hugefan)
  • (jake)
  • (meh)
  • (motherofgod)
  • (nice)
  • (noidea)
  • (notit)
  • (ohmy)
  • (paddlin)
  • (rockon)
  • (salute)
  • (sap)
  • (standup)
  • (taco)
  • (tayne)
  • (thatthing)
  • (theyregreat)
  • (toodamnhigh)
  • (unacceptable)
  • (upvote)
  • (waiting)
  • (whoa)
  • (yeah)
  • (youdontsay)
Elena Gorman

HipChat for Mac 3.1 – Meet the New chat button

By Elena Gorman | 4 weeks ago | 26 Comments

Adios, lobby

In this Mac release you’ll get a new design for finding your teammates and public rooms from our New chat popover button.

New HipChat chat button

Meet the new chat button on HipChat

New form, more function

The New chat popover allows us to consolidate the entire lobby experience into smaller, more visually efficient solution so your teammates and rooms are front and center. It also sets the stage for us to add more functionality within the popover – like the ability to invite new users and create new rooms more easily.

Begin typing to find the right person in the New chat dialog

We started thinking about this after observing users depend on the lobby to start chats instead of using a keyboard shortcut (Command N). Some users complained that going to the lobby to find someone was cumbersome. We agreed.

Download the latest Mac app

 

What do you think? Let us know in the comments :)

Jeff Park

Meet the new iPhone and iPad apps: faster, better, iOS 8ier

By Jeff Park | 2 months ago | 12 Comments

Hot on the heels of our newly redesigned HipChat for Mac, the brand new HipChat for iPhone and iPad is out today. The new HipChat is more responsive, more beautiful and more connected, so you can get work done faster, wherever you are.

The first thing you’ll notice is the new design, which is lighter, cleaner, and easier to navigate. It’s also faster; responding more quickly to get you directly to the right conversation. And HipChat uses some of the great new features of iOS 8 to connect with the other apps on your phone.

So what’s new?

Beautiful and efficient new design

We’ve redesigned HipChat to make it easier to read information and faster to navigate between conversations. The main chat window has been simplified and the chat windows have been improved to fit more context on your mobile screen.

We’ve also brought HipChat more in tune with iOS aesthetics, all while fitting beautifully within Atlassian’s Design Guidelines.

A fresh new chat view makes it easy to read your messages.A new home screen makes it easy to find your conversations.

Share to (and from) HipChat

The new HipChat makes it even easier to share with your team. 

You can now select any file from any other app and post them straight into HipChat, and vice versa. Let’s say there’s a photo you want to share with your team on HipChat. Simply click the share icon button, select HipChat, and choose which chat you want to share the photo with. Likewise, if you have a file in HipChat you want to share, just click the share icon inside HipChat and select where you want it to go.

Share on HipChat easily.

Interactive notifications

Now you can be even more efficient in HipChat thanks to our new interactive notifications. When you get a notification from another teammate or chatroom, you can pull down to read the whole message.

You can also respond directly from the notification. Click the pencil icon to type a reply. Or ‘quick reply’ with a thumbs up, thumbs down, OK or question mark. Interactive notifications let you carry on multiple conversations without constantly switching tabs. Get your point across without leaving your current chat.

Stay on top of your messages with rebuilt notifications.Quick reply to messages with our interactive notifications.

There’s a lot of other cool stuff in this update, so grab the new version on your iPhone or iPad. If you don’t have the app yet, you can download it for free at the App Store.

As always, we want to hear your feedback. Let us know what you think!

Jeff Park

Get to know the new HipChat

By Jeff Park | 4 months ago | 105 Comments

Starting today, we’ll be rolling out a HipChat that looks a whole lot different. At first you’ll notice it’s lighter and cleaner, but there’s a lot more going on (and sets us up for more big changes to come). We’re starting with the Mac app first, then we’ll be rolling out the changes to the rest of the apps.

HipChat for Mac 3.0

The new HipChat for Mac 3.0

Over the past few years, the Atlassian design team created the Atlassian Design Guidelines. ADG is a public guide of the best practices when designing Atlassian products, services, and add-ons. We followed the spirit of these guidelines in the new Mac app, so some of it may feel familiar if you currently use existing Atlassian products.

More than a coat of paint

Along with a new design, you’ll also find the app has some new features and fixes mixed in.

Emoticon autocomplete

Does your team have more emoticons than you can remember? It may sound like a (firstworldproblem) but once you use emoticon autocomplete, you’ll wonder how you lived without it. Simply type the open parentheses, and the autocomplete window will pop up.

Say things faster with Emoticon autocomplete.

Local time in 1-to-1 chats

Now when you’re in a chat with someone, you’ll see the local date and time of where they are. As a company that’s spread across a dozen time zones, we’ve been wanting this for a long time. Now I’ll know if I’m about to message someone in the middle of the night. I’m still going to do it, but at least I’ll know.

To make sure you don’t get woken up, you can set your timezone in your account settings.

The local time of your colleague is listed here.

Unread message counts

We recently added unread message counts to our Android app. Our Android users loved it, so we’re releasing it on all of our desktop apps (starting with Mac). HipChat will also indicate when you have new messages for tabs hidden off of your screen. You won’t miss a message again.

Never miss an unread message with unread (and hidden) message counts.

New presence icons

Our old icons were the classic red, orange, and green orbs that made it somewhat difficult to tell them apart (nearly impossible for colorblind folks). We’ve kept the color scheme, but changed the shapes to make it easier for everyone to know whether someone is available.

Updated status icons make it easier for all people to use HipChat.

One last change: search.

As HipChat has grown, our search took on the brunt of the growing pains. We’ve made a lot of infrastructure changes and now search speed should be noticeably faster. There’s also a search bar in the header now so you can search from anywhere. Best yet, since version 2.6, search results now show up within the app.

A much improved search is in the new HipChat for Mac 3.0.

There’s a lot more in this latest version, so update your Mac app and check it out. If you don’t have the app yet, download it for free at hipchat.com/downloads

As always, we want to hear your unfiltered feedback. If you have questions or got something to say, please let us know.

Pete Curley

New HipChat app icons, take two!

By Pete Curley | 7 months ago | 23 Comments

After months of hard work, our team was really excited to announce 1-1 video chat and screen sharing for all of the apps. However, that news was completely overshadowed by another change: a new logo and app icon.

This is our new logo and the controversial OS X app icon we released a few days ago:

New logo Controversial OS X icon

The feedback was as plentiful as it was negative. 

There were hundreds of tweets about how ugly the icon was. Hundreds.

The weird thing is, we agree. So how did this happen?

The original goal of the new logo was to align it with the rest of the Atlassian tools. I think we achieved that and came up with a solid logo. The problem came with the implementation of the app icons themselves.

You could look at the feedback and say “people hate change” which is often true. But the problem here was that a large part of our team feels the exact same way as our users. There were two schools of thought when it came to the icon:

School #1 – “Consistency means the icon is the same on every device.”

School #2 – “Consistency means it pays homage to the style/design while respecting the look and feel of each OS.”

We fought. We argued. We gave each other the silent treatment, then argued some more. In the end, we chose option #1. But hey, if it sucks, we can fix it. We have zero problem admitting we made a mistake.

We made a mistake. The app icon sucks. Today we’re fixing it.

Lesson learned: respect the design guidelines and recommendations put forth by each operating system, even if you have to sacrifice your own internal guidelines. No one wants to see an OS X icon that looks like it belongs on iPhone, and people certainly don’t want to see an Android app with an iOS style icon. The part that made me both happy and sad was that people on Twitter proposed an alternative design, and it’s almost the exact app icon that we decided not to use in the first place (and I have the PSD’s to prove it!).

Here’s the the new app icon we’re releasing today for the desktop apps:

The new NEW OS X icon

It may seem that having hundreds of tweets shitting on your icon is a bad thing. Sure – it bummed us out, but it means our customers are passionate and they fucking care. It also means our team members that argued for the ugly icon have to buy the rest of the team a big box of apology donuts.

So let us know what you think of the new icons. I can’t promise we won’t make mistakes in the future, but I can guarantee we’ll own up to them and make things right.