HOME | DD
nsrosenqvist β GNOME-Shell mobile layout mockup
by-sa
Published: 2013-09-30 23:52:52 +0000 UTC; Views: 4591; Favourites: 37; Downloads: 39
Redirect to original
Description
I wanted to test out some design ideas surrounding the GNOME-Shell after I've seen all the nice new updates that came with 3.10. This is in no way completely thought through, it's just a quick attempt at translating the desktop UI onto a smaller touch device (I know that there is no way of accessing the overview except through a hardware button). All comments and critiques are welcome!# UPDATE 2013-10-06:
I decided to make a second revision of the design and this time basing it on the 1280x768 display of a LG Nexus 4, so that I get a proper reference for the position and size of elements.
Changes:
* The shape of elements adhere closer to the style of GNOME-Shell's default theme but I've kept my changes that I think improves the user experience. An example is that I've chosen a flatter look and removed borders of most elements.
* The overview now also has the search bar so that it's more accessible.
* An example of the window list overflowing has been provided.
* The pagination on the view showing all installed apps ordered by title are now placed horizontally, differing from the desktop GNOME-Shell since the swiping gesture is then more comfortable on a handheld device.
* An example of a search view has been added.
* An example for the notifications view in the overlay has been added.
p.s. Sorry #GIMP-Artists, this time I implemented the designs in Inkscape since I found it to be much easier handling "objects" like interface elements and aligning objects with it. Though this presentation of all screens has been put together in The GIMP
NOTE:
The search results are supposed to show a longer list with results from the web, even direct results from google/ddg, I just didn't have the time to make it more detailed.
Related content
Comments: 33
Funny, I just made a mockup of GNOME on phones by myself and posted it on Google+ some weeks ago. Interesting that we had the same idea
π: 0 β©: 1
Yeah
π: 0 β©: 1
Oh, there are even Unity mockups? I've got a looot to check out now.
π: 0 β©: 1
Spiceofdesign has a couple of nice mockups of both unity for desktop and mobile: spiceofdesign.deviantart.com/gβ¦
On Ubuntu App Developers you'll see a lot of nice app designs by Lucas Romero Di Benedetto: plus.google.com/u/0/communitieβ¦
π: 0 β©: 1
Thanks for the links! I'm not really a fan of Ubuntu, but I'll join that community anyway
I agree, spiceofdesign's art is awesome.
π: 0 β©: 1
I'm there mostly to see how the app ecosystem evolves
π: 0 β©: 1
Oh, it was a quick GIMP edit using a few screenshots from GNOME on my laptop, nothing fancy, so I didn't post it on dA. I posted it in the Google+ GNOME community instead
π: 0 β©: 1
That mockup is the proof, that Gnome-shell is suitable for any screen-size. (o:
π: 0 β©: 1
Thanks! I've just updated the design, do think it was an improvement?
π: 0 β©: 0
wow, Someone must make an android romΒ at least. This is insanely good. The lock screen is amazing!
π: 0 β©: 1
Wow, looks great, would be nice to see Gnome-Shell for mobile touch devices. Good idea and looks well thought out.
π: 0 β©: 1
Your very welcome.
π: 0 β©: 0
Looks clean and consistent, and really like Gnome Shell. I especially like how the status bar gets pulled down to the bottom of the screen.
My android phone kinda looks like this.. It's running Cyanogenmod, 1 homescreen, favorite apps in the dock + another four icons on top of it, and that's it. Simple is good
π: 0 β©: 1
Here I've disabled the concept of a homescreen or a desktop, instead the lockscreen is where you show off a nice background image and the home button takes you to the application overview, like current GNOME-Shell. That will allow more focus on the apps and not management of the OS's interface.
I didn't know you could get that status bar behaviour with Cyanogen, the Android versions I've used always uses a handle that comes of out nowhere when pulling down the status bar which always seemed rather weird to me.
π: 0 β©: 1
No, it doesn't have that behavior, I just like the way you did it
It's a nice design overall, hope you will do more like this.
π: 0 β©: 1
Thanks! I'll probably make a second revision of this and include some changes and more screens
π: 0 β©: 0
I'm in on the application launcher if the search field is a Google (web) search, not an application filter.
π: 0 β©: 1
Sorry, I don't think that's the way to go. It would however provide the same results that GNOME-Shell search providers can give you since it's just another layout for the shell (e.g. google results). You do also realize that it is the same amount of clicks (shorter travel distance) to just open the overview -> the web browser and search in the address bar?
π: 0 β©: 1
Du you own a smartphone? Do you need an app filter field on your home screen or do you need a web search? How do you arrive at the conclusion that typing directly into a search field from a home screen takes as many "clicks" (touches?)? On my phone it's 1 touch > then type (from home screen search field) - and it's 1 touch to open browser > 1 touch to enter address bar/google start page search field to activate touch keyboard. Or: double the effort.
π: 0 β©: 1
Your reasoning is invalid. You compare this design with (probably) the stock Android interface, that features a search bar on it's home screen. When you go "home" in this design you open the overview, not the application launcher, therefore your argument makes no sense at all since you're discussing the functionality of the search box here, not the one on stock Android.
"Do you need an app filter field on your home screen or do you need a web search"
I am a user who would greatly appreciate an app filter functionality in my smartphone since I look for and launch apps far more often than doing web searches.
I will however try to address your concerns. As I stated in the deviation's description is this simply some ideas I threw together, not a long thought out implementation. I just wanted to spark some ideas in the GNOME community. If I find the time I will redo this design with the comments I've heard mentioned kept in mind. For example, I had forgotten that the shell features search providers since I'm used with the 3.6 workflow which I've been using on my Ubuntu installation. That's why I didn't consider using it for anything else than application filtering.
This design is on a 320x480 resolution, many smartphones today have a lot higher resolution than that and with more screen real estate there might be room for more elements in the design and I could move the search bar into overview instead (or keep it globally within the overview/launcher).
p.s. I've already figured out a nice design to show all results from different search providers which is probably enough for me wanting to make another revision of this design.
π: 0 β©: 1
Eh, I'm trying to argue why the home screen search field would make more sense as what it already is on several Android smartphones (not just stock) than what it is in gnome-shell - I haven't misunderstood you, nor am I "discussing something else".
I use the app filter in gnome-shell, and Synapse in Gnome 2,, it's useful, and quicker than looking for apps manually. But a smartphone is not a desktop/laptop. On a smartphone the keyboard is not already there, the search field is not already selected waiting for your input. You have to first press in it to activate the on screen keyboard, then use that keyboard to filter for apps. If you have 2-3 app pages sorted alphabetically, it won't be quicker than just swiping to the right and clicking the app when you see it. That's all.
π: 0 β©: 1
I've now updated the design trying to address this issue you mentioned. Keep in mind that the web results are supposed to be a longer list, I just didn't have the time to make it more detailed
π: 0 β©: 0
Very good job, it does feel like Gnome Shell and it does look very nice. It'd be interesting to see the other apps in this form factor.
π: 0 β©: 1
Thanks! I think that most of the new core apps would fit very well on a device of this size. I'll probably explore other designs later
π: 0 β©: 0