Charms Bar concept for WP8

linking1990

New member
Jan 20, 2012
156
0
0
Visit site
Dear WPCentral members,

Let me start off by asking you to excuse me for both my poor English (as it's not my native), and for my bad design implementation. I know that in the right hands someone could implement this in a better, neater way than I did. I know I tried the best I could!

This thread is aimed to address a very common topic among Windows Phone OS users, which is the notification center. I know that many of you don't see the point of having an implementation for such a feature that other OS's have, as the live tiles are supposed to be covering this area. I used to agree with this point of view until recently, the need of a notifications history to keep track of what's going in your life is really important!

You already know that if you never pinned an app on the home screen and missed the push notification message, you would probably never know that about it! More important is that if an app had multiple notifications, a small number would indicate the last notifications without knowing what happened at a glance. This misses one of the foundations that WP was originally based upon.

I saw earlier an implementation for a notification center by swiping to the left on the home screen, the problem in this is that each time you want to see a notification you would need to get to the home screen first, then swipe to get those notifications. This means that you need to back out from anywhere you're at to get to see the notification history, then press the back button to get back.

My implementation uses a different approach, using a charms bar-like implementation already seen in Windows 8, my implementation is taken from there with some little modifications to address even more issues than just a notifications history, including: quick settings, quick share button, closing an app easily and in some cases getting more info at a glance (time, date and remaining battery).

I don't want to make this post any longer, but first off I need you to see this video for Windows 8 charms bar, to get a sense of the animations, and the way things are handled, from settings to the share button and so on. Seeing this video can be helpful for people that aren't familiar with the way Windows 8 Charms Bar operates.

Windows 8 Charm Bar Walkthrough - YouTube
start at 1:50

So, what I did is to implement this vertical charms bar into a horizontal one, which can be accessed by a swipe from the top of the screen.

Please note that I made two designs, I thought that both of them can be good and matches the WP design language. Both designs are shown below:


First design


(Kindly press on any of the pictures to enlarge them for a proper view of each)

1.jpg

As seen in the image above, the charms bar is accessible from any place you're at, whether you're on the home screen, or within the browser, or even inside of a game. This has an advantage over other OS's implementation as they are not accessible from anywhere. Note that on the home screen, a search button is up there, this search button different than the physical one which takes you to Bing. This one is similar to the one found in Windows 8, where you can search your phone locally, from apps, to files, to even searches within apps themselves. This button is replaced with a "close app" button while the user is within an app, we all know about how frustrating can closing an app be on any WP 8 device. This is not a back button, it simply closes all the layers of an open app, instead of keep pressing the back button to do so. Think IE 10 while opened 10 web pages, it would take you forever to close it.

Start.png

As you can see from the start screen above, a box pops up in the lower half of the screen containing different important info, including the time, date, connectivity and a battery indicator!
Back to the charms bar, the share button is also there, which has a different functionality depending on the page presented to the user, for instance, while on the browser the share button should share the current web page, as you have seen in the youtube video I posted above. Pressing the share button shall bring a drop down box for choosing an app to share this with, you can pick an email, your social services, or any other app. Sadly I didn't have the time to implement this =/.

The third button takes you to the start screen, and I know that there is already one on the bottom, but the point of having one up there is when you are busy handling the bars above, sometimes you might need the start button next to your finger tips.

Notifications.png

The fourth button is the notifications button. Pressing upon it will bring a drop down box containing the latest notifications, with a button below that takes you to a larger, and more info preview. This is used on the go. Notifications can be swiped to the right to close them.


Settings.png



Finally, the quick settings menu shows some quick settings for most needed, on the go toggles. This can save lots and lots of time for any user instead of going back and forth into the settings to get things done. Edit: I made two designs for the settings toggles, let me know what you think of each. The second one when pressing on any of the words such as "Wi-Fi", this shall take you to the Wi-Fi settings page too. (more than just a toggle).

Please note that the charms bar is supposed to fill the black negative space at the top of the screen (above the tiles), think of the push notification toast and how wide it is.
While the charms bar is not activated, network info, wireless and Bluetooth indicators, battery and clock will always be shown (no swype needed) as before.


Second Design

The second design is shown below, the only difference in this one is that there is no box that shows with the swype containing different info, they are presented above of the charms bar as follows:

2.jpg


Tiles2.png


Notifications.png


Settings.png


Thank you everyone for reading, I am really eager to read your comments and thoughts about this concept.

Cheers!
 
Last edited:

rockstarzzz

New member
Apr 3, 2012
4,887
1
0
Visit site
I love your adaptation for charms bar but don't like the idea of drop down of lists after charms are opened. Very Android like.

However, if I was able to tap on charms and then it did the OS animation and opened a "hub", then it would be much cooler and still WP like. The drop down reminds me of ICS or CM ROMs.
 

12Danny123

New member
Mar 24, 2012
1,770
0
0
Visit site
I like it!. But I agree with Rockstarzzz. you don't need a drop down notification centre. most likely a hub would be best
 

linking1990

New member
Jan 20, 2012
156
0
0
Visit site
Thank you for the comment.

I get what you're trying to say, and I thought about this a lot! I don't know, but I think that to need to go to another hub or a different page takes away some of the functionality of such an implementation. It includes more taps, more page loading and to back out you still need to reach the far away back button from your work area. Probably this isn't very close to the WP design language, but for instance the box that appears for the settings is also taken from Windows 8, so I guess MS can figure out a way to put it in a more compatible form (if ever implemented).

Thanks again :).
 

peachy001

New member
Nov 3, 2012
1,354
0
0
Visit site
I have hoped that they would utilise the volume buttons for some things. For example, if I currently hit the volume down I get a solution for volume levels and silent or not. I wish it would give me more. Things like:
Vibrate toggle
Silent toggle
Music vol toggle
Call vol toggle
WiFi toggle
Mobile data
Bluetooth,nfc,flight node etc
Few other quick toggles (some defined by the user)
 

Chregu

New member
Feb 14, 2012
7,504
0
0
Visit site
I'd do it like it is already on Windows 8 but on the left side (on the right side are the programs, on the left side are the charms). And the menu, after chosing an icon, would be on the entire screen instead of only a part of the side.
 

peachy001

New member
Nov 3, 2012
1,354
0
0
Visit site
I like the charms idea, although it want a shorter route. I want to see them do more with the volume button. It may sound odd, but it already calls up volume information. I want it to do more. I want the volume, obviously, but also want more toggles. Currently it just gives you the option to go either up or down the volume and also go on or off silent. Real wasted opportunity in my eyes. I want to see:

Volume - (Media/ringtone/notification)
List of apps running

- on/off toggles for all of the following
Silent
VibrateWifi
mobile internet
Bluetooth
GPS
Battery level

The volume buttons even work on the lockscreen, so is pretty useful in terms of quickly altering the sound profile withou having to trawl through numerous menus. Also using the volume buttons mean that you avoid some of the issues when on webpages/other areas. It would avoid conflicts with items on a webpage etc.

I think that you could have it bring up a shaded area at the bottom, with other options on, like the charms. I notice on your charms idea that the settings can be accessed, but I would like the toggles to be available at a glance.
 
Last edited:

peachy001

New member
Nov 3, 2012
1,354
0
0
Visit site
I wanted to use the volume buttons as it already has a little functionality at present. Also, by doing this it does not affect the current items on screen. This would reduce the chance of accidently clicking a link when all you actually wanted was to pull up other items.
 

Twice Born

New member
Nov 17, 2012
63
0
0
Visit site
I like it. It really adds just another point of commonality between Win8 and WP8 which is a good thing. People using Win8 will find it that much more comfortable using WP8 with an implementation like this.
 

linking1990

New member
Jan 20, 2012
156
0
0
Visit site
I like the charms idea. I want to see them do more with the volume button. It may sound odd, but it already calls up volume information. I want it to do more. I want the volume, obviously, but also want more toggles. Currently it just gives you the option to go either up or down the volume and also go on or off silent. Real wasted opportunity in my eyes. I want to see:

Volume - (Media/ringtone/notification)
List of apps running

- on/off toggles for all of the following
Silent
VibrateWifi
mobile internet
Bluetooth
GPS
Battery level

The volume buttons even work on the lockscreen, so is pretty useful in terms of quickly altering the sound profile withou having to trawl through numerous menus. Also using the volume buttons mean that you avoid some of the issues when on webpages/other areas. It would avoid conflicts with items on a webpage etc.

I think that you could have it bring up a shaded area at the bottom, with other options on, like the charms. I notice on your charms idea that the settings can be accessed, but I would like the toggles to be available at a glance.

Well to be honest with you, I wanted the settings pop up box to have toggles instead of buttons, the thing is that I didn't know how to implement the properly with the toggle style of WP. I have had an idea to do it this way, let's see if I can manage to pull it up later on today after I am done with my job.

And I see what you want to get to, but I don't think that it's logical to have the volume buttons control the whole system. It's just not reasonable. I agree with you about the volume profiles control, should be implemented differently with more profiles to choose from.

Thanks for sharing your thoughts!


Edit: Here you go, please let me know what you think. Note that pressing on any of the words such as "Wi-Fi" takes you to the Wi-Fi settings page also.

Settings2.png
 
Last edited:

jiayit

New member
Nov 19, 2012
302
0
0
Visit site
What isn't Metro about this? It follows the Windows 8 Charms Bar them near perfectly?
call this nitpicking or whatever but yeah. the search button has a handle, it doesn't look like the capacitive search button on my phone. The charging symbol too. I'd prefer it to look like the normal charging symbol, except without it blinking.
 

Members online

No members online now.

Forum statistics

Threads
323,183
Messages
2,243,404
Members
428,036
Latest member
Tallgeeselll05