Interactive Summary Menus #13
Comments
|
@coiko I was looking through the summary videos/comparison slider images to get an idea of what could be made for the interactive summary menus. I had a question I wanted to ask about the menus, so that I can better look into what needs to be done to implement this features. Were the interactive menus going to follow a template, or will each summary menu be different? I noticed that some of the summary videos show a circular structure with information appearing in the center as each part of the structure is focused while other videos showed a unique animation of sorts. Feel free to answer this when convenient, because I know I stacked a couple of other questions in other issues! |
|
Thanks @KianBadie! (And sorry I'm still working through the other questions in such a leisurely way....) This is a great question. Currently they do have different formats, but for the interactivity to work well, I think they should all follow the circular format (just with different numbers of sectors around the ring - some 6, some 8, etc.). I'm redoing the non-conformers, but in the meantime, just assume they'll all be circular. And let me know if you want any files (e.g. svgs) to play around with. |
|
@coiko No worries! Ah I see what you are saying. Yes, if I could have the svgs for a chapter to play around with that would be great! Will the menus follow the same animation as the video with the text appearing in the middle as one hovers over different parts of the circular menu? |
|
@KianBadie Here are the svgs for the Chapter 2 summary - one with the text labels and one without. I also screenshotted the export options I used in case different ones would work better? And yes, I think it would be great to have the text appear in the middle like in the movie, but if you think it would look better to have it somewhere else (like outside the ring) go with your instinct. Thanks! |
|
@coiko Thank you for the zip and screenshots! I will go ahead and see what we can do. I will let you know of any updates as they come. |
|
@coiko I have some exciting progress to share! The interactive summary development has been going well so far. I have attached a gif below of how things are looking. Now that I have a better idea of how to get a working solution, I was wondering if we could have a meeting tomorrow to discuss what we need in order to get the menus onto the site. If not, all questions can wait until Friday and I can continue refining the "blueprint" of the menus, and then plug in whatever is needed when it is time to start moving things to the site. Gif
|
|
@KianBadie Oh how exciting! That's looking great! Yes, let's meet tomorrow. How about 1pm? |
|
@coiko 1pm sounds good to me! I will talk to you then. |
|
@KianBadie Great - thanks! |
|
@coiko I think things look good to chop up the rest of the chapter summary svgs. Things look like they will work nicely with the current implementation we have. As you can see in the gif below, the svg text is a bit inconsistent. Because I apply a fixed width to all text (big or small), I think it ends up making short text have a big font size and long text having a small font size (because they are all normalizing to the same width). There is still some experimenting to do though and see how I can make it work better, so I have nothing conclusive yet on the text! But I think the graphical svg pieces are good to go. There are some questions I had about rendering the graphical svg pieces:
Also, the grey border and white background of the summary menu are very easy to remove. So that option is always there if you think it would look better. Gif
|
|
@coiko I have found a possible fix for the svg text. I think one cause of the uneven text was that each text element was 100% width of their container. You can see how this causes font size difference in the "2_4 unmodified" and "2_8 unmodified" screenshots below. However, when I modified "2_8" container to be the same width as the "2_4 unmodified" container in inkscape (see screenshot "2_8 modified"), the font sizes started to look similar. So that might be a workaround: find the svg with the longest width and then make that the default width for all svgs in illustrator. If that sounds like a worthwhile fix for you, we can try it out with the ch2 svgs and see if it works well. Another thought I had during this: if there isn't much time for this fine tuning work at the moment, what I could do is just uses non-svg text and add the text coloring/bolding myself through styling rules. It might not be the method to make this easily maintainable for you, since you would have to go through me to change the content/style of the text. But for the sake of getting this feature to "1.0", I figured it would be the most straightforward and we could improve that method in the future. If the bolding/coloring is consistent (for example: only three blues for chapter 2 and only bold/nonbold text) and has room to not come out exactly like the svgs, then that might be a worthwhile fix. From experience, bolding text in css does not have much fine grained control. Often times it feels like there is only "normal" and "bold" but nothing in between. 2_4 unmodified
2_8 unmodified
2_8 modified
|
|
@KianBadie Thanks for this, and sorry for the slow response! The feature is looking great! I really like the styling with the white background in the grey-bordered element. I think it's nicely consistent with the other section pages. The inconsistent text sizing makes perfect sense, and I think there's a very easy way to export them at the same size from Illustrator. I was already wondering if that method might also make the alignment of the elements easier. I think it's beyond my limited powers of verbal description, so maybe instead of typing a confusing explanation here, I can show it to you in our meeting tomorrow and we can discuss. I was thinking we could also go through the svg export options for customization together since you probably have a better idea of what to look for. |
|
@coiko Should the icon in the mobile controls be something different than the image icon for the summary menus? Or do you think the image icon is appropriate? Another thought I had was some sort of ring that is broken up into a few pieces, so that it can resemble the summary menu. I was thinking something along the lines of this or this. What do you think of those? Is there a better design that you think might capture the summary menu more? Screenshot
|
|
@KianBadie Ah, that's a fantastic idea! I really like the circle concept. Maybe we could also add an arrow to suggest summary/review. I didn't find anything with the broken-up circle, but what do you think about something like this? |
|
@coiko I am open to adding the arrow! It does look similar to the refresh icon for browsers. Do you think we should avoid that association, or do you want to give the "refresh" message. Like "refreshing" on the chapter. I'm not sure yet what to think about that. Also, am I able to remove the "video" metadata for the section markdown files for the summary pages? Or would you prefer to keep that metadata? |
|
@KianBadie Good point! What about something more like this? And yes, you can definitely remove the video metadata for the summary pages - thanks! |
|
@coiko I like that one as well. Just because of the association with the refresh button, I think I would vote for the most recent one you linked. We can use that one for now and see if we find anything more fitting along the way. In the end, the icon can be easily switched around. |
|
@coiko The new svg files you sent last week worked out great! The font always looks the same size and scales correctly, and the numbered menu pieces look good. Whenever you are ready, I think that the same process for this chapter 2 summary can be applied to the rest of the chapters. I just have one more request: for the naming convention can we please name the files Also, would you please be able to include the non-slice up versions of the summary menus along with the sliced up svg files? I use them as reference when positioning the summary menus. Gif
|
|
@KianBadie That's wonderful! This looks so cool! And yes, the naming convention will be very easy to follow. |
|
@coiko The development on the summary menu for mobile has been slowly getting there. I remember from our last meeting, you mentioned that the menu should behave similarly to the phylogenetic tree with the touch panning/zooming. I was wondering if you also wanted the scroll zoom/mouse panning behavior on non touch and desktop screens? I also wanted to ask what your thoughts were, when considering how the summary menu looks on mobile in the gif below, on the value of the zooming. Since the elements are a bit larger than the tree, they are a bit more visible at normal zoom than the tree. The gif below (Pixel 3) makes the phone seem larger than it actually is, so the representation might be a bit skewed. I have also added some screenshots from my actual phone (iPhone 8) in portrait and landscape (sorry they are so large, but you can click on them to see them in a better view). Still, the representation is a bit skewed compared to how it actually looks when holding in front of your face. It seems that most of the value from the zooming/panning would be for the text, since it becomes smaller when the menu has to resize to fit the screen. What are your thoughts I don't have a strong opinion on either zoom/no zoom, but I wanted to check in and make sure you still thought it was still worth it before implementing it and having you realize after that it did not need it. Summary menu on mobile
|
|
@coiko My apologies, I think my earlier message/question about value can be taken a bit more lightly. Most of the leg work for panning/zooming was done for the tree viewer and it was very easy translating it to this. So for context, having/not having it won't significantly affect time. |
|
@KianBadie Sorry for the slow responses today. But I think this is getting there fast! It looks fantastic! And I'm glad you asked before implementing the zoom because I do think it's probably not necessary. The size makes it quite readable, and I think the built-in pinch-zoom-whole-page functionality on mobile devices, and the browser zoom controls on desktop, will be more than enough for anyone who wants something enlarged. So I'd say it's perfect as is! |
|
@coiko That's great to hear! And that sounds good with the zoom. If you find that you would like the pan/zoom feature in the future feel free to let me know. Like I said, most of the heavy lifting was done already and it only took a short bit to plug that functionality into the summary menu. |
|
@coiko I noticed the chapter 1 summary svg has some background graphics (which look great by the way)! Did you want those to expand as well when hovered with the correlating menu item? And did you want the main "circle" structure of the menu to be centered? Currently, it is a bit off centered because of the background graphics. Screenshot
|
|
Thanks @KianBadie (and sorry for the extra pain)! Yes, the background graphics should expand with their relevant pieces. And yes, it would be great if the circle were centered (ignoring the background graphics). Would it help if I sent a centered version of the svg (like what we do for the text)? The centering will probably be an issue for other chapters as well, where different things stick out from the circle on different sides. |
|
@coiko Sounds good and no worries! I think I might be able to center things. It might work out if I do the centering too because I'm still figuring out how to scale everything properly, so it might change as I go. It's not too hard to do thankfully. I just want to make sure I'm centering things right. For each one, I will try to find the "main circle" path and center it based on that, like the screenshot below. Is this what you were thinking? You can see how the red circle is centered, resulting in the actual svg graphic being placed outside of the grey box. Screenshot
|
|
@KianBadie Perfect! That's exactly right. Thanks! |
|
@coiko No problem! I will let you know how it goes. |
|
@coiko So things with the summary menus have been going well so far. The way I have been doing things, I am making it so that 100% of the circular menu is always within the bounds of the component view when expanded. This prevents any part of the graphic from being cut off when the menu gets in tight spots (really short/long or really tall/slim screens). However, this will also result in the menus being different sizes since some menus have more graphics sticking out the edges than others. I was wondering if you liked the way I was doing things, or if you prefer all the menus to stay the same size and allowing elements to be cut off. This might also result in the extra side graphics being cut off without expanding. I have attached a gif below showing the way I have been doing things: Another drawback of the way I have been doing things is that the text will be the same size for all the menus even though the menus vary in size. As you can see in the gif below, the text looks larger in proportion to the menu as opposed to the chapter 2 examples above. That is because the text is tied to the width of the red box. One way to fix this is to tie the size of the text to specific values per chapter as opposed to a one-size-fits-all value (currently 70% of the red box). Not necessarily a road block, but a style choice to decide on depending on the answer to the above question. What are your thoughts? Gif
|
|
Thanks @KianBadie - that's great! I like your idea of keeping everything visible by adjusting the size of the whole package. If it's easy, I think it would look better if we could also scale the text by the same factor. Then it will be internally consistent with the size of the numbers and won't potentially overlap any unexpanded elements (as in the example you showed). Also, embarrassingly, I see a glaring typo in that text - can you swap that piece out with this one? Thanks and many apologies! |
|
@coiko That sounds good! And I will go ahead and scale things to be consistent with the size of the circle. It will be an easy thing to do. No worries! I will go ahead and swap them out. Funny that the gif showed that. |
|
@coiko I just pushed the summary menu update to the testing site! There are still some things to smooth out (some spacing with some of the menu pieces in particular), but it was in decent enough shape and I wanted you to have access to it sooner rather than later. I eyeballed the size for the text in the summary menus. So if you think any of them should be adjusted, please let me know. My goal with the text spacing was to have the longest text element still have some padding in between it and the menu. As usual, please let me know of anything that needs to be touched up. I will be keeping an eye on the summary menus as well and changing things as needed. |
|
@KianBadie These are awesome! Thank you so much! I'll check for any tiny nitpicky adjustments, but all I can say now is that overall they all look fantastic! |
|
@coiko I tested out the chapter 1 svgs that you sent and attached a gif of them below. In my opinion, the spacing looks nice and I prefer it over the previous connected version. I think the styling rules of each svg is overwriting each other when they are all on the same page, which is why I think there are some unintentional stylings in the gif. Looking at the files, it looks like things were exported differently. I think if the files are exported with the value "Presentation Attributes" for the "CSS Properties" field, it would match the previous svg files. Back to the spacing: I think it worked out well. If you like how it looks as well, I think doing the same exact thing you did with the chapter 1 svgs will work out with the other chapters if the export settings are tweaked a bit! Gif
|
|
@KianBadie Perfect - will do then! And sorry about the export settings - I thought I'd be clever and edit the svg files directly (to keep the dimensions the same) but I didn't realize that they would save with different settings. |
|
@coiko Oh that is clever, and off that it exported differently because of that. When you say edit the files directly, is that editing the svg code, or editing the individual piece svg file in illustrator? |
|
@KianBadie I edited them in Illustrator and then tried just saving them the default way, but I think I should have re-exported them to get the settings right. I just tried that, so see if these work better: Thanks! |
|
@coiko I see, they indeed do work better and look great! I think it would be good to go to do the rest of the chapter summaries. One side affect that I wanted to make sure was known is that since there is more whitespace that is part of the svg, there is more whitespace to trigger a certain menu item. So if the mouse is over that new whitespace area, it can trigger the menu to expand. Gif
|
|
@KianBadie Perfect! (And I think the extra trigger area is fine.) I'll go ahead and do the rest then. Thanks! |
|
@KianBadie Here are the pieces for the other two summaries that needed gaps (Chapters 3 and 8). Let me know if you need anything else. Thanks! |
|
@KianBadie Sorry - forgot one! Here's the piece from the Chapter 9 summary that was missing a number (2). Could you replace that one, too? |
|
@coiko Awesome! I will go ahead and update those chapters soon. I will let you know if anything comes up. |
|
@coiko I just pushed the summary menu updates for chapters 3, 8, and 9. So they should be up on the testing site soon! |
|
They look fantastic! Thanks so much @KianBadie! |
Issue to discuss implementation of interactive summary menus.
The text was updated successfully, but these errors were encountered: