AD v2 for iPad Active Button Issue

[MoonaticDestiny]

So the buttons in AD v2 for iPad are showing that theyre all active. This is an issue because youre telling the users that these buttons are on when theyre not. Serif is using different button active indicators and theyre confusing the user with these active indicators. This needs to change by making all buttons "inactive" and having the serif development team decide which active indicator they want to go with. They can only choose 1 because they have chosen 3 active indicators here in the app. So I need the serif team to make all their buttons inactive and then choose 1 active indicator to go with, light gray or blue. 

Below is me explaining their button issue and providing a solution to this issue.

 

 

[MoonaticDestiny]

Actually, theres 3 things going on. Theres inactive buttons, active buttons, and then active buttons that stay on. I didnt really talk about "active buttons that stay on." I only 86'd them because I dont like the dark gray reverse highlight style its in because it confuses the user as being active. I instead said to choose between light gray or blue when really you should be using both.

Dark gray to show inactive buttons. Light gray to show a button has been activated. And then blue to show active buttons that stay on.

The dark gray button that I titled "86" needs be removed from that app because youre using it as your active buttons and active on buttons and its confusing the user. 

 

[MoonaticDestiny]

Heres an example of how how the top bar should look. You should also be using the color blue because it tells the user that something is on. Its like when you highlight text. The blue highlight lets you know what text youve selected. The blue box here lets you know what youve turned on. Its a good indicator. Kind of like the blue lines used for the drop zones in the layers studio. 

 

[loukash]

Thanks for the research and examples. 
I haven't used v1 on iPad, but some of the UI decisions in v2 – be it on iPad or on desktop – are truly… mind-boggling. As if Serif's UI designer was on leave during the development…  

[NewInBoston]

8 hours ago, MoonaticDestiny said:

 

 

The last option looks like it’s selected instead of toggled. Snap is a toggle not an active selection.

You’ve posted quite a few opinions on how you think UI should look. Do you have a portfolio of work you can share so we may see your work in action to get an idea of how you apply these examples? 

[NewInBoston]

Another thing I noticed that makes sense as-is are the transpose tools. They aren’t options that are active or not because they are simply stateless hot keys. Flip horizontal, for example is directional and the visual queue needed comes from the object. 
 

It really exists as a convenience to the right click menu containing transpose selectors.

 

[MoonaticDestiny]

2 hours ago, NewInBoston said:

The last option looks like it’s selected instead of toggled. Snap is a toggle not an active selection.

 

Im trying to understand you comment. So....snap is a button that can be turned off or on (toggled). So making it blue shows that its been turned on. Tapping it again would turn it off. Its currently "turned on" in the last example. When its off, it will return to the way it is in the example before the last one. Snap has been "selected" and turned on. 

For the selection tool in the last example. I think i messed up. It shouldnt have been a blue box. It should have been a light gray box because now Im going back to how they currently have it with the reverse highlight dark gray indicator only this time I made it blue. 

 

[NewInBoston]

4 minutes ago, MoonaticDestiny said:

Im trying to understand you comment. So....snap is a button that can be turned off or on (toggled). So making it blue shows that its been turned on. Tapping it again would turn it off. Its currently "turned on" in the last example. When its off, it will return to the way it is in the example before the last one. Snap has been "selected" and turned on. 

For the selection tool in the last example. I think i messed up. It shouldnt have been a blue box. It should have been a light gray box because now Im going back to how they currently have it with the reverse highlight dark gray indicator only this time I made it blue. 

 

I just checked V2 designer on iPad and one thing I noticed missing from desktop is hot keys up top showing as not available when an object selection isn’t active.

The snap icon makes sense though because darker means recessed or pressed. It might benefit from a little inner shadow to show it as an inset button. 

[NewInBoston]

Blue might work for active tools, though, and reserve darker state for on/off scenarios.

[MoonaticDestiny]

2 hours ago, NewInBoston said:

Blue might work for active tools

I think if a tool from the toolbar is active, then a "light gray box" should show that its active. Not blue. I say that because in the "STUDIOS" example at the very top, layers is active and a light gray box is used to show that its active. So if that light gray box is being used for the studio icons to show that theyre active, then that same light gray box should be used for the tools on the left side. Right now they use a dark gray box to show that theyre active. Look at the first example called TOOLBAR. It a dark gray box but it should be a light gray box.

I do want to note that in AD v1 for ipad, serif did use "blue" to show a tool was active. They put like a blue line next to the tool icon to show the tool/studio was active.

I dont think serif should be using the reverse darker gray box. Its weird and its confusing users. 

 

 

[MoonaticDestiny]

2 hours ago, NewInBoston said:

You’ve posted quite a few opinions on how you think UI should look. Do you have a portfolio of work you can share so we may see your work in action to get an idea of how you apply these examples? 

Im not a developer. Im just a designer. I pay attention to how this app is designed. I dont have any work to show. I can only show a photoshop mock up of how I think the app should function when I see something wrong. I used to post several mockups in the AD v1 for ipad forums, but I stopped because serif was ignoring us ipad users and no updates were going to happen. With the new v2 update, I came back to see what changed and.....sigh. I figured I'd get to work since Im not doing anything. 

[NewInBoston]

30 minutes ago, MoonaticDestiny said:

 

I dont think serif should be using the reverse darker gray box. Its weird and its confusing users. 

 

 

UI conventions use this technique because of how light works in the real world, it builds off how shadows work. Your example is opposite, and would be confusing if an icon doesn’t allow interactivity there would be no way to show it.

When showing depth an outer shadow is used while to show inner depth an inner shadow is used. The tricky part is making this work with a flat UI style. 

In this case their hierarchy of colors is correct, but have been used to represent both toggle and active states which could use distinction, though I don’t think it is unintuitive for the majority of users.