Interface design can be improved
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Foto |
In Progress
|
Undecided
|
Unassigned |
Bug Description
I made this mockup. You may like it, or take some ideas of it. Just an idea.
Erasmo Marín (erasmo-marin) wrote : | #1 |
summary: |
- Interface design mockup + Interface design can be improved |
Camilo Higuita (kxmylo) wrote : | #2 |
I've made some other mockups.
For the thumbnail panel view i've made two:
1- http://
The contractor sharing menu: http://
and for the album view: http://
I hope you like some of the ideas.
Suggestions are welcome.
Camilo Higuita (kxmylo) wrote : | #3 |
Erasmo Marín (erasmo-marin) wrote : | #4 |
Camilo Higuita (kxmylo) wrote : | #5 |
Erasmo Marín (erasmo-marin) wrote : | #6 |
Yes, it's a lot better.
I think you would improve it by adding some glass effect in the big sized version of the icon instead the gradient, and changing the angle of the "album page" that is over the other ones. Also, is possible to do some changes to make it look a bit more "tango-style" as elementary icons do?
Camilo Higuita (kxmylo) wrote : | #7 |
- iconsbrillo.svg Edit (62.0 KiB, image/svg+xml)
Look now, i've fixed some things
and this is with the overlapping: http://
let me know what you think.
I just saw the picture you attached experimenting with my mockup, it looks a lot better...(in my eyes) i just find a bit odd the zoom slide there.
Camilo Higuita (kxmylo) wrote : | #8 |
Erasmo Marín (erasmo-marin) wrote : | #9 |
- Captura de pantalla de 2012-10-23 22:01:44.png Edit (866.6 KiB, image/png)
New version looks better hehe :D
Check now the slider. I think you was right about it was "odd", and it was (in my opinion) because the slider size. Also, I added 2 icons, that improve consistency. These are from Shotwell.
I have ruled out the possibility of holding + / - buttons , because it would be inconsistent with the rest of applications available for the Gnome desktop.
Camilo Higuita (kxmylo) wrote : | #10 |
It looks a lot better with those two icons. But will be the zoom slider also visible from the album view, or is it possible to zoom in the album view?
By the way I checked the elementary HIGS for the icons and I think the icon follows the Tango style. these are two examples i came across:
for the shape: http://
and the overlapping: http://
Let me know what you think.
In the attached image i was playing with a textured background for the Album view.
Camilo Higuita (kxmylo) wrote : | #13 |
- foto-3.svg Edit (82.8 KiB, image/svg+xml)
another option.
sorry for have spammed this tread so much tonight.
Camilo Higuita (kxmylo) wrote : | #15 |
Camilo Higuita (kxmylo) wrote : | #16 |
- foto32.png Edit (228.2 KiB, image/png)
(reposting this cause i get messed up with the another one)
I was thinking about the Home button/Album view switch, and that made me think: if you are seeing an image there should be another button to take you to the Album from where the image is from, and therefore to see all the rest of images inside of that same album. While the Home button would take you to the main album page with all the other albums.
So I made another mockup with this in mind. I hope it explains itself.
And also about the zoom slider, I think it's pretty intuitive to zoom in or out using the mouse scroll wheel , or the gestures in case of a laptop. If there's no way to use none of them, then using an option from the gear menu, as Foto does now. And when the zoom action is activated, then show the zoom slider. Just some ideas.
Let me know what you think.
Erasmo Marín (erasmo-marin) wrote : | #17 |
Hey Camilo, you should create a branch called "foto-icons" and another called "foto-mockups" or something like that, so, if you change something, you don't have to upload the changes here.
I liked a lot the last icon you uploaded, I think it would be included in foto as default icon :D!! but I still have to research how to do it.
I have been working on a new widget called "GroupButton", because there is not a widget like this in Granite Api, and I'm very happy with the result. The slider would require some work, because it's difficult to overlap widgets in gtk, so, I think, the solution is to create a popup, maybe, using Granite.
I have decided to hide buttons that are not being used instead of setting their state as inactive. Also, the nav buttons, should be always at center of the bottom toolbar, that is what I believe.
Now i'm going to push the code.
What I have now (see attachment):
Camilo Higuita (kxmylo) wrote : | #18 |
Just compiled it and it looks great. Just two issues:
1- The gear menu popup should be heading upwards, instead of downwards . it looks odd and in full screen you can't see the menu options.
2- There should be a "go back" button on the album view if you went to it from an image, so this way you can go back to the image.
Not sure if I should fill a bug report for this issues.
Let me know
Erasmo Marín (erasmo-marin) wrote : | #19 |
1.- It's a granite bug. I have already submitted a fix for it, so, i'm waiting for my code to be approved :)
https:/
if you compile my version of granite with the fix, and then uncomment line 49 in MainWindow and compile, you will see that the problem is fixed.
2.- Maybe, it's something I have no decided yet how to do it.
Also, I have though about a "slideshow" or "presentation" icon in the middle of forward and backward icons.
About the icon, I have been testing it on plank and I still think that it needs some work with border. Maybe a darker and less rounded border. See terminal icon from elementary icon set for reference. Also , it need fit to the elementary icons margin, and different size versions.
We should use a chat or something like that for interface design talk. google+?
Camilo Higuita (kxmylo) wrote : | #20 |
I'm still trying to figure out how to create a branch.
Meanwhile I want to show you two more mockups:
1- http://
This one just to show the idea of adding an image from the image viewer to a new album or to a existing one. Also the ability to select images (as Files does) and add them too to an album.
2-http://
A mockup for the inside of an album. Also, this shows you what I meant in my last comment about a "go back" button, to return to the image if you went to the album view from it.
Camilo Higuita (kxmylo) wrote : | #21 |
I've made some variations to the icon. I tried to make it stand up more with a darker background gradient (1), but i don't quite liked it. So I made a few with a brown background. Take a lot and let me know which one you like better.
My google+ account: https:/
Camilo Higuita (kxmylo) wrote : | #22 |
take a look* sorry, my bad
Camilo Higuita (kxmylo) wrote : | #23 |
Camilo Higuita (kxmylo) wrote : | #24 |
Camilo Higuita (kxmylo) wrote : | #25 |
there are all the mockups and all the icons i've worked on.
Camilo Higuita (kxmylo) wrote : | #26 |
I've made a new mockup for the thumbnail panel and the basic image enchantments (basic ones like rotating, cropping and color balance, and also Image filters) . I based on the sidebar of Audience. I attached a png preview. Let me know what you think.
Camilo Higuita (kxmylo) wrote : | #27 |
Also I've made this other two mockups.
1- An idea for the face recognition feature. A new Faces view:
2-And a mock up of the toolbars. I think it looks weird and inconsistent to have to maximize icons which do different things, so I used the view-list-coverflow for the fullscreen/
Let me know what you think.
Camilo Higuita (kxmylo) wrote : | #28 |
Erasmo Marín (erasmo-marin) wrote : | #29 |
- Radial gradient Edit (46.0 KiB, image/png)
A faces view is a good idea, but I have been thinking about using a sidebar, like Noise, Pantheon-Files, etc...
Maybe it's a better option, considering that we will have a lot of views and stuff:
-Tags
-Albums
-Pictures
-Faces
-Folders (maybe?)
Well.. we have time to think about it. First I need to figure out how to implement this faces thing. Maybe, OpenCV is a good option, but it will needs some custom vapis.
I take this opportunity to mention that I have been playing with css, and it occurred to me to add a radial gradient to album view. I'd like to get your opinion. See attachment.
Camilo Higuita (kxmylo) wrote : | #30 |
it looks nice but yet, it feels weird on the album view cause it concentrates the view in the center of the gradient cause of its circular shape, i felt it distracting. Have you tried with some noise effect?
http://
Blog post with downloadable code here: http://
Erasmo Marín (erasmo-marin) wrote : | #31 |
These css noise effects uses images as background. Currently, there is not possible to do this in gtk, because repeat-x and repeat-y properties are not supported. It would require some hack, and I don't want to do something like this.
Camilo Higuita (kxmylo) wrote : | #32 |
Apparently it will be possible with gtk 3.6???
http://
on gnome-boxes 3.6: http://
I thought it was possible cause of the noise background of gnome-boxes on ubuntu 12.04: http://
but it seems really messed up now that i see it again.
Camilo Higuita (kxmylo) wrote : | #33 |
"Since my last post on the topic, GTK 3.4 brought in a lot of improvements, including among the others, support for most of the properties of the CSS3 backgrounds and borders family, linear gradients and the long requested inactive windows theming feature, which is showcased in GNOME 3.4"
previous posts links to this page: http://
see there these:
3. Backgrounds
3.1. Layering Multiple Background Images
3.2. Base Color: the ‘background-color’ property
3.3. Image Sources: the ‘background-image’ property
3.4. Tiling Images: the ‘background-repeat’ property
i don't know if this might be helpful or just spam .
Erasmo Marín (erasmo-marin) wrote : | #34 |
Yes, I have tried this, but this does not work :(
You can experiment with css now, just edit the css files stored in : /usr/share/
Camilo Higuita (kxmylo) wrote : | #35 |
I tried it and this is what i got:
1-http://
i made a new noise image a lot bigger than the one you pushed
this is with the noise.jpg in the /data/icons folder:
http://
Erasmo Marín (erasmo-marin) wrote : | #36 |
I don't think that using a bigger image is a good solution.
For now, I will remove the radial gradient, because it load very slow, and cause some visual glitches.
Next commit comes with "image draging" feature, so, we can add pics into an album.
Camilo Higuita (kxmylo) wrote : | #37 |
- fullscreen-slideshow.png Edit (1.6 MiB, image/png)
I've updated the mock up for the slideshow(
There should be a difference between fullscreen and a Slideshow view. As a slideshow i picture a presentation of your images with transitions effects, e.g coverflow, while fullscreen would be the same window fitting the whole screen space.
In case there won't be such slideshow type of view, I think would be much more nicer to use the window maximize button to fullscreen the app, as audience does right now.
With this in mind I made this mock up:
Eduard Gotwig (gotwig) wrote : | #38 |
What happens when the user does press the fullscreen button, from window mode?
Camilo Higuita (kxmylo) wrote : | #39 |
Would just normally maximize. Given that the button "Slideshow view" would do pretty much the same as a "fullscreen" when you pause the Slideshow transitions.
If there weren't a Slideshow type of view, then the maximize button from the window would fullscren the app.
Camilo Higuita (kxmylo) wrote : | #40 |
I've updated the mock ups for a sidebar in the home view.
1- The Image Viewer: https:/
The toolbar buttons in order: Go to Home View - Go to Album Grid View - Go to Slideshow View ----- Previous image- Next Image-------- Contractor Share Button-Floating Bar (to edit the image with filters or basic option like cropping, rotating...)
2- The Slideshow/
Button in middle of previous/next to pause-start the slideshow and one next to View Album Grid to restore the window.
3- Home View: https:/
The toolbar buttons in order: Add/Import images (to create a new album or to add it to an existing one)- Fullscreen View---
And in the side bar some filters for tags, rates, tagged faces, dates, imports etc...
4-Album Grid View: https:/
The toolbar buttons in order: Go to Home View - Add/Import images (to add it to the existing one)- Start Slideshow/
Let me know what you think.
Changed in foto: | |
status: | New → In Progress |
Erasmo Marín (erasmo-marin) wrote : | #41 |
Camilo Higuita (kxmylo) wrote : | #42 |
It looks really nice, but i think it should be optional to have that header.
It could even have more info, like people/faces tagged on the album, album creation date... and that kind of information.
btw, in this prototype were you using the granite thinpaned?
Again, it looks really nice, to me.
Camilo Higuita (kxmylo) wrote : | #43 |
Also, I notice that in the Home view, the option to create a new album should be on top first and not at the end, cause when you have a lot of albums you have to scroll down to be able to access to the option and it's hard to discover, i believe i'd be easy if it were on the top, like the tabs work on midori, pantheon-terminal, the option to add a new tab is the first one.
Erasmo Marín (erasmo-marin) wrote : | #44 |
Agree with you that this header should have more information, but I don't have idea how to organize this information in a easy way. It would be perfect to see what do you have in mind in a mockup.
Also, yes, that is thinpaned. At left, sourcelist, and at right, the view container
About the position of the "add button", I'm going to see how other apps solves this problem first. I am aware of the problem, but not sure of the solution
Camilo Higuita (kxmylo) wrote : | #45 |
- drawing.png Edit (320.8 KiB, image/png)
I updated the mock up with the header information, i couldn't think of something else to add, although there could be more useful information if you come up with it.
Also about the add button, in facebook they do the same as i wrote before, putting the add button first: http://
Erasmo Marín (erasmo-marin) wrote : | #46 |
What happen if there are too many tags or people? should the header be scrollable? or only the right side? or not?
Camilo Higuita (kxmylo) wrote : | #47 |
only the tags box in right side, and clicking one face tag or just a simple tag should filter the images inside of the album.
Erasmo Marín (erasmo-marin) wrote : | #48 |
I have added the noise effect, I realized that the workspace view plugin in Gala is using a noise texture as background, so I took the code from there, it's not so "hackish" as I though.
Also, a Drop Area widget has been added, and the multiple files import is now "working". The next step in this direction is to add a folder import option.
Other important thing is that I have received a lot of commentaries of people that dislikes the bottom toolbar. I have been thinking in removing the toolbar from the albums view, because of this:
1.- In the albums view, you don't need any buttons.
2.- In the image grid view, you only need one button, and this button can be placed in other place.
I have been thinking about putting the "back" button in the album info (the gray bar at top), maybe in the right corner, like the Android 4 apps button. Also, if is needed, multiple buttons can be added following a vertical layout (ie: Gwibber).
Looks very nice, I will wait for the other views and see how this is going.
Can you do also a mockup with the thumbnail panel ?