SmartZoos / Toolset

Gaming platform for SmartZoos project
MIT License
0 stars 1 forks source link

Shrinking and dividing the Start Info box #108

Open PatriciaMoller opened 7 years ago

PatriciaMoller commented 7 years ago

The current Start Info box is way too big and contains too much irrelevant information. This is a suggestion on how to shrink it:

startruta_less info

Compared to the current box, this contains: Title For this mock-up it has a low-opacity (5% and a white background) image of the Skansen map. This could be replaced with the "featured image" of the activity, granted it has high enough resolution Description Number of Questions (To help indicate the length of the activity) Difficulty, using e.g. easy/medium/hard instead of numbers. Estimated play time. This line should contain the word "estimated" or similar so players don't thinks it's a time limit.

I consider this to be the only information needed for the player to get started. Contact info could be placed in an another menu or "About"-section. Perhaps that info should be to whoever is responsible for the maintenance at the respective zoo.

If SmartZoos is used for the first time on the device, the descriptions for the Icons can be shown in another box after the Start Info box has been closed:

icon description

I suggest cutting down the amount of text in all info boxes as much as possible. It's best to get straight to point.

pjotrsavitski commented 7 years ago

Using uploaded image as the background of the header element would be an issue. The images is scaled to 800 pixels for the longest size (the proportion remains the same). Showing that in full would be in issue.

kaimikael commented 7 years ago

The picture would be cropped, though?

pjotrsavitski commented 7 years ago

@kaimikael Yes. It will be processed to fit the 800 by 800 max allowed size. Smaller ones are left as is. This means that picture could have any aspect ratio and it will be preserved. Only portion of the image could be shown as a background for the header as it is clearly having a lot more width than height (the result will never be as perfect as predefined image that has the correct aspect ratio).

PatriciaMoller commented 7 years ago

Maybe it should just be called "banner", to be more clear with the context the image will be used? Granted that this is what we go with, of course. That way, the image would more likely be chosen/edited to fit the purpose. What are the possibilities of having a tool in the activity editor for scaling/cropping the image to fit? It'd be more user-friendly to be able to makes such changes at once, rather having to make them outside the site and replace it.

I want to see the image incorporated in the menu design somehow, as an icon, banner/cover photo, etc. Otherwise it just takes space.

pjotrsavitski commented 7 years ago

@PatriciaMoller The tool to deal with the cropping and then upload is doable (many exist; just need to find a suitable one that works well with mobile devices). Most of those also have some configuration options, this could force the user to choose the correct aspect ratio for the uploaded part of the image chosen.

This image was meant to be used within the listing, at least I have allowed the uploading for that purpose. Showing that within the game dialog was my own initiative.

We should decide what would that be used for and then go with it.

PatriciaMoller commented 7 years ago

@pjotrsavitski A tool like that would be very nice.

I can prepare some variations for how to incorporate the image. I do think it's a good idea to have it in there, it could help connect the list item and the Start (same image means you got to the right page)

PatriciaMoller commented 7 years ago

Here are some suggestions for the Start box: startruta_less info Please, give your opinions on which you prefer and think would be the best to work with.

kaimikael commented 7 years ago

I like transparent stuff, so I vote for the first alternative, though I would even move up the "Learn about…" onto the banner so as to use space efficiently.