Redesigning the Android app

[Markus Slopianka]

On Sunday 29 March 2015 21:56:52 Albert Vaca wrote:

> About the redesign, it would be cool if you can share the mockups you
> already did (a picture of your drawings is enough), because it's something
> that I would love to tackle later on this year.

First of all, I should mention my primary design inspirations. So even without 
an interactive mockup, it should help understand my drawing.
They are AntennaPod, a FOSS podcast app, and the Messaging app as found in 
CyanogenMod 12. I also had a quick look at screenshots of Pushbullet but I 
didn't find it too inspiring. Maybe I'll take a closer look should I go forward 
with my design concept and hit a wall somewhere.

My drawing:
https://share.kde.org/public.php?service=files&t=f0fdbe07be30b205ea066e561cd31826

Screenshot of AntennaPod:
https://share.kde.org/public.php?service=files&t=b435a379762a5335b13b82c5ecf21cb7

The first items in the sidebar are the Touchpad and Media Player plugins. As in 
AntennaPod they are accommodated by monochrome icons.
Then follows a list of paired devices. As with the Messaging application, they 
get a colored circle icon.
Then follows Settings entry (monochrome gear icon) which is partially 
overlapped by a Plus button (probably colored as color means 'related to 
remote devices') to pair further devices. Settings and Plus always hover at 
the bottom of the screen, so even if some insane person pairs 20 devices, one 
does not have to scroll to the bottom of the list to find these entries.
The settings entry contains options regarding the device the user currently 
holds in his hand and also "About KDE Connect" with Copyrights, GPL, etc..

The Plus button shows a list of discovered devices as well as an "Connect to 
IP" button.
A "Guest Pair" mode that kind of acts like AirDrop for iOS would be cool, too. 
The user could send links and files to a friend without full pairing.

The main screen features Material Design's title bar. It contains the name of 
the device currently controlled and a 3-dot menu. The background color changes 
according the the color in the sidebar's circle icon (this idea is from 
Messaging).
In the touchpad view by default almost the entire screen (minus the title bar) 
serves as touchpad. In the lower right corner is a "Show Keyboard" button.
The 3-dot menu contains "Ping" and a Settings menu with options regarding the 
currently selected remote device.
Here I must say I'm not entirely sure that having two separate Settings menus 
(one for the device currently in the user's hand and one for the remote 
device) is such a great idea, however if 20 devices are paired, listing them 
all in the sidebar's settings menu, feels kinda convoluted right now.

For this Per-device Settings I do not have a drawing, only keywords of 
features I feel should be there:
- Unpair button (not directly in the 3-dot menu to not hit it accidentally)
- A handful of settings that hopefully could sync. I.e. if I don't want my 
smartphone's file system to be browse-able from My PC, I could deselect it here 
and My PC's KCM would remove the checkbox as well.


> We already got some mockups from Heath Paddock, an artist from Elementary
> OS (I think). I think it's relevant to link them here:
> 
> https://dl.dropboxusercontent.com/u/8820360/kdeconnect/mockup1.png

That looks interesting for larger screens like tablets. My design is focused 
on regular smartphone form factors.


> https://dl.dropboxusercontent.com/u/8820360/kdeconnect/mockup2.png

I don't like that switching between remote devices requires an additional tap 
on that triangle menu button. Disconnect can be hit accidentally which is very 
bad if the remote device is so remote, the user cannot just pair it again.
Not sure what Stats he wants to see...


> However, the goal of this other change is the same
> as removing the first screen: save the user from making more clicks than
> needed, and I believe that we should think in that direction.

Yes, absolutely.