Nifflas' Support Forum

Being Creative => Nifflas' Sources => Topic started by: egomassive on April 21, 2011, 21:26:24

Title: Knytt Stories: Ideas for level selection layout
Post by: egomassive on April 21, 2011, 21:26:24
In Knytt Stories' level selection menu, you can filter levels based on 3 traits; category, difficulty, and size. I think it would be very helpful if you could filter by activity too. You could show only new levels, the most recently installed level, or the last level played. The problem is there's no room in the column of filters.

I have attached my best effort below which I'm not entirely pleased with it. It feels imbalanced and cluttered. I'd like suggestions for an improved layout, or even your own mock ups. Two things, the info message at the bottom can't be much shorter than it is in my image, and "Last Installed" could be dropped as a choice if it helps the layout.

P.S. Yes, the image is from my mod and it is fully functional, but let's consider that off topic.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: LPChip on April 21, 2011, 21:52:47
Can you add scrollbars? Then you could add one on the left side to scroll down. I would reorder the filters though.

Another idea is to remove the filters altogether and add them as a menu item. That way, you have as much space as you need.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on April 22, 2011, 00:32:18
There's certainly enough room for a scroll bar. With some effort I think I could make it match Nifflas' minimalistic style. The downside is the filters chosen wont be visible at all times.

Making filtering a menu option would declutter things nicely, but the menu isn't accessible in fullscreen mode. Also, I don't think the info message can work with a real menu.

You just gave me an idea for a combination of your suggestions. I could program popup menus that act like http/java-script popup menus. Hover over a filter trait, and the options would slide out from the bottom. It would be clean and sleek, but probably poorly balanced. Hmm...

Edit: While working on the expandable menus, I had another idea. It's a little rough still, but here it is (see image.) I realized the balance issue can be solved with a panel of color in the background. Also, if I removed the "All" buttons and reduced the padding between traits, then everything could fit in one column again. Once everything is properly sized I think this is going to look great, but I'm still open to suggestions and criticisms.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: LPChip on April 22, 2011, 09:19:35
If you can add the word add to the [ button in a rotated text (90°), I think it would add that little extra.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: Salmoneous on April 22, 2011, 12:54:47
searching for levels and authors could be really helpful. I have found it very bothersome going all the way to the end with 50 pages of levels. And the 3 search filters aren't so helpful all the time, some level creators don't categorize their levels and some times you don't even know what to go at.
Good luck egomassive I will download it when it's done.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: sergiocornaga on April 22, 2011, 14:07:34
Why not go a step further and change that [ bar to checkboxes? By default all would be checked, clicking the checkbox next to a word would turn it off. Another idea (which might fail in execution) is that clicking the word itself could serve as a shortcut to turning off all the other options in that category.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: LPChip on April 22, 2011, 14:36:06
I wouldn't want to have to click everything to change between all and one box.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: sergiocornaga on April 22, 2011, 16:53:05
Quote from: LPChip on April 22, 2011, 14:36:06
I wouldn't want to have to click everything to change between all and one box.

I guess I didn't explain my second sentence very well. I was suggesting that clicking the category name (for example, 'Environmental') rather than the box beside it would behave similarly to the solo function used in many sound editing programs. That is, if clicked it would turn off all the other things in that box, and if clicked again, it would turn them all on again. Essentially the words would behave as they currently do in Knytt Stories, with the addition of the checkboxes.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on April 22, 2011, 22:25:44
@ LPChip: I considered sideways text, but it wasn't appealing in my mind. I'll see how it looks, and maybe post it for public opinion. I think the purpose of the brackets is self explanatory since they're selected by default when the selection menu starts.

@ Salmoneous: A search bar is a great idea. I envision treating all entries as if they have wildcards at both ends. Then, matching that to title, author, folder name, and description all at once. It begs the question, where can I put it. I could stick it at the top of the filter panel if I get rid of "Last Installed"*, but I'll have to reduce padding further. I could put it below the level blocks next to the page buttons. Hmm... I just don't know. I really want to add a search bar now! It would be so helpful!

*I haven't mentioned this yet, but "Last Installed" is an unimportant filter because when you install a level a link to that level appears in the installation menu (see image.)

@ SergioCornaga: Although check boxes are a viable alternative to an "all" button, I think they would be tiresome. A way to turn them all on or narrow down to a single flavor is necessary, but clicking on the words is non-intuitive.

Edit: The search box is complete. Everything works great as far as I know. Although it's looking good, I'm not satisfied. I have no idea how to improve the layout again. I've added images of the current layout and a mock up of LPChip's suggestion for the filter bar. So, please voice your opinions, suggestions, etc. for the ideal layout.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: LPChip on May 05, 2011, 09:39:01
I suppose that since the brackets are selected by default, you make a good point that its obvious. I don't find the All text that disturbing, but without it, it indeed looks just a tiny bit cleaner. But I suppose that is, because the bracketlines almost touch the word All. Maybe change it to " All " (adding 2 spaces).

I can't think of anything else. Looks good this way.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: sergiocornaga on May 05, 2011, 11:21:45
I think I like it better without the 'All'.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: Headgrinder on June 18, 2011, 20:04:28
Doing a little grave digging.  :)

The all seems like it might be necessary for new users.  There is nothing worse than using a program for a few weeks, being frustrated that things don't seem to work smoothly, then realizing they do, you just didn't realize how things functioned because they where not clear.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on June 18, 2011, 21:16:24
Coming back to this article after a time has given me a fresh perspective. Looking at the images above, now I prefer the "All" version. Although I think the use of them makes it intuitive --seeing the blue highlights move-- it couldn't hurt to make their purposes even more obvious as Headgrinder and LPChip have both suggested. I think I'll alter the brackets leading into the "All" a bit as LPChip suggested.

By the way, you can now try it out for yourself. I released this as a beta available here (http://nifflas.lpchip.nl/index.php?topic=4175.0;topicseen).
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on August 31, 2011, 01:46:52
Here's what I came up with so far. The bar with numbers should have "1" to "7" in this case of Page 1/7, without any arrows.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on August 31, 2011, 08:14:53
Is ^that the future selection menu for KSEx? I was considering a similar page selecting feature for my mod --still unnamed-- but I didn't come up with an easy way to implement it. And how does the sort by date feature work? I have a "new" filter that shows only levels that have been installed/overwritten with my mod but not played. It requires writing to the World.ini on installation and when opening a level. The date sort would be far better a solution I think.

Anyhow, the layout is nice and clean, stays true to the original look. I'm not sure about the extra arrow buttons though. Would they scroll through the 7 pages to choose from or go to the next page like the arrow buttons above?
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on August 31, 2011, 11:54:37
Yes, and now I've already implemented the buttons. The arrows normally aren't shown. They would only show up if there's insane number of levels. Say, if you have more than 20 pages you'll see "1", "2", ..., "19" and right arrow. If you click the right arrow you'll select page 20 and will see left arrow, "20", "21", ... It wasn't an easy thing to do, not too hard either.. I still get surprised by how good MMF2 is at bugs. Here's a nice one: expression Buttons Count( "Page Marker" )*X Step( "Page Marker" )/2 is interpreted as Buttons Count( "Page Marker" )*(X Step( "Page Marker" )/2)
For filtering by date I'm planning to use the latest one among saves dates and world folder date. Have you looked for an MMF2 component that would allow getting files dates?
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 01, 2011, 08:36:45
Wow, that's a terrible bug! I'm not sure if I looked into date finding before. I'm a little rusty after taking the summer off, so I can't even speculate on a date finding solution right now. If I remember correctly, I was discouraged by the thought of rearranging the level list, not finding the dates.

After creating a search box I thought the dynamic page buttons weren't worth the time it would take to implement them. I'm not saying it isn't useful, but it's less useful when you have a search box.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 01, 2011, 11:46:50
Quote from: egomassive on September 01, 2011, 08:36:45
Wow, that's a terrible bug! I'm not sure if I looked into date finding before. I'm a little rusty after taking the summer off, so I can't even speculate on a date finding solution right now. If I remember correctly, I was discouraged by the thought of rearranging the level list, not finding the dates.
I think I'll add it to my extension, it would be easier for me than searching for an extension. For rearranging I think I'll just add date into strings before level path and use the same built-in sorting.

Quote from: egomassive on September 01, 2011, 08:36:45
After creating a search box I thought the dynamic page buttons weren't worth the time it would take to implement them. I'm not saying it isn't useful, but it's less useful when you have a search box.
Indeed. I haven't given the search box enough thought. Most of the time sorting by date should be enough and in other cases search would be the best option.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 02, 2011, 05:55:19
I was thinking about your, GrayFace, layout. I'm guessing you click the "sort by date" button to sort by date. Then, you click it again to go back to normal sorting. This is different from how the filter buttons work. Shouldn't you have a "sort by author"* button to toggle the sort method back to default?

(*When levels are made correctly the sorting by folder name is essentially the same as sorting by author.)
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 02, 2011, 21:21:48
There doesn't seem to be a good place for two vertically aligned buttons. Horizontal alignment doesn't look good either. Single button looks best, although behaves a little unusual.
Here's an update of layout with planned search option.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 03, 2011, 03:41:52
That looks much better. The "sort by date" looks good in it's new location. How will a user do a search? Do they click on the button and then a box appears?

I don't know if you want any search tips, but for my mod I'm using the "edit object" to handle the user input. I use the "window control object" to handle focus issues that arise from using the "edit object". Then, I use the "string parser object" to do the actual searching. The edit object appears before the rest of the frame, which I don't like, but it works great at least in the updated version of my mod.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 07, 2011, 13:09:24
Quote from: egomassive on September 03, 2011, 03:41:52
That looks much better. The "sort by date" looks good in it's new location. How will a user do a search? Do they click on the button and then a box appears?
Yes, then the list updates as they type and the search box disappears when they press Enter.

I'm using "edit object" too. I check if it has focus and give it focus if it doesn't have it. I use "Find" function to do the searching.
I'll send you the WIP version.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 09, 2011, 09:33:50
^:Oh! So, you've already implemented searches. It's nice that you would share your source with me, but I'm afraid I can't open it. You're using MMF2 Developer only extensions. My friend's copy is developer, and I could install them to his copy, but if ever I do buy my own copy of MMF2 it will be the basic version, and I don't want to start using extensions that may later be unavailable to me.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 09, 2011, 13:18:57
I don't know which ones are developer only, I didn't think I use developer-only extensions. You can copy any other extension under the name of a missing one to make the project open up, just to view the code.
I'll never buy a copy of MMF2 myself, so I don't have this problem :D
One issue with the edit object I have is that I can't remove the beep sound when I press Esc, but I guess I can handle it in my extension.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 10, 2011, 04:14:53
I didn't even notice the beep on esc. I have it too, but I don't see it as a problem for me. Clicking outside of the edit box or pressing tab takes focus from my search function. It never closes, it just loses focus. That's the reason I use the Window Control object.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 10, 2011, 10:27:14
Here's how I handle it. Maybe it would be better to close the edit box when it loses focus instead of keeping it focused, I don't know.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 11, 2011, 07:18:24
I thought you were creating it dynamically, since you said it appears and disappears. My bad.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 11, 2011, 10:58:38
Now I'm done with sorting by date, made most of it inside the extension. Does my extension work in non-Developer version of MMF2?
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: egomassive on September 12, 2011, 13:22:21
Sorry, I'm getting things mixed up. It was Looki's Level Editor Mod that used Developer-only extensions. I was just too lazy to install your extension and the Lua extension. :oops: Guess I can take a look at your source.
Title: Re: Knytt Stories: Ideas for level selection layout
Post by: GrayFace on September 13, 2011, 04:39:19
I've uploaded the newer version to the same link.