Improved Galactopedia Design
- eleazar
- Design & Graphics Lead Emeritus
- Posts: 3858
- Joined: Sat Sep 23, 2006 7:09 pm
- Location: USA — midwest
Improved Galactopedia Design
Navigating the 'Pedia is pretty important to the game, unless you have a photographic memory. Unfortunately, in it's one-window incarnation, it's not very easy to get around.
The following design is modeled after the most user-friendly in-game 'pedia i've had the pleasure to use-- a modded Civ IV 'pedia, though i'm sure you can find similar designs elsewhere.
The sidebar on the left provides both context and quick navigation, allowing you with a single click to go back to the start, or to select a parallel topic. The result of any click is much more obvious and predictable than "Up," "Back," or "Next" buttons.
This is not a pixel perfect example, but the basic idea.
If we committed to only two levels of headings, the "Up" button could be more clearly labeled "Back to Index" or some such.
The disadvantage is that it takes up a bit more space vertically-- which is important in the production, research and design screens. In these contexts the "galatopedia" heading could be dispensed with, resulting in an equally vertically-efficient design.
The following design is modeled after the most user-friendly in-game 'pedia i've had the pleasure to use-- a modded Civ IV 'pedia, though i'm sure you can find similar designs elsewhere.
The sidebar on the left provides both context and quick navigation, allowing you with a single click to go back to the start, or to select a parallel topic. The result of any click is much more obvious and predictable than "Up," "Back," or "Next" buttons.
This is not a pixel perfect example, but the basic idea.
If we committed to only two levels of headings, the "Up" button could be more clearly labeled "Back to Index" or some such.
The disadvantage is that it takes up a bit more space vertically-- which is important in the production, research and design screens. In these contexts the "galatopedia" heading could be dispensed with, resulting in an equally vertically-efficient design.
- Attachments
-
- should have put a scrollbar in the species panel here.
- Galactopedia3.jpg (132.82 KiB) Viewed 16139 times
- adrian_broher
- Programmer
- Posts: 1156
- Joined: Fri Mar 01, 2013 9:52 am
- Location: Germany
Re: Improved Galactopedia Design
I would like to pick this up, but I have some questions regarding this:
- Galactopedia2.jpg and Galactopedia3.jpg show an arrow button(?), what would be semantic of it?
- You said the Header would consume too much space, what about the section header (For example 'Index' and 'Species' in Galactopedia2.jpg)? Are those really needed?
- Should the index be a plain list? What about using a accordeon or a tree UI pattern to mix both vertical navigation (sub- to supercategory or the other way around) and listing?
Resident code gremlin
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
- Geoff the Medio
- Programming, Design, Admin
- Posts: 13603
- Joined: Wed Oct 08, 2003 1:33 am
- Location: Munich
Re: Improved Galactopedia Design
I assume the ↺ is the back button, which would go to the previously shown entry.
Before implementing this, I'd suggest considering how to add UI support for a text search function.
Before implementing this, I'd suggest considering how to add UI support for a text search function.
Re: Improved Galactopedia Design
Perhaps what is currently called 'Index' should really be considered as the top level of 'Contents' (and a tree structure for that such as adrian suggests would be nice), and then there could be a comprehensive index page, which lists things not just by primary title but also by alternate title and major-referenced-concepts. That would reduce the need for a text search, or a text search could be keyed off that comprehensive index list rather then needing to be a full text search.Geoff the Medio wrote:Before implementing this, I'd suggest considering how to add UI support for a text search function.
If I provided any code, scripts or other content here, it's released under GPL 2.0 and CC-BY-SA 3.0
- eleazar
- Design & Graphics Lead Emeritus
- Posts: 3858
- Joined: Sat Sep 23, 2006 7:09 pm
- Location: USA — midwest
Re: Improved Galactopedia Design
Excellent.adrian_broher wrote:I would like to pick this up, but I have some questions regarding this:
Geoff's right, that's a "Back" button like in a browser.adrian_broher wrote:Galactopedia2.jpg and Galactopedia3.jpg show an arrow button(?), what would be semantic of it?
That seems to me to be rather useful context.adrian_broher wrote:You said the Header would consume too much space, what about the section header (For example 'Index' and 'Species' in Galactopedia2.jpg)? Are those really needed?
The accordion would i think just get in the way. When a heading is expanded there usually a lot of entries underneath, not a neat little paragraph. Though the accordion could be useful in the article itself, in some cases (like species articles) where there's a lot of text)
The tree seems like the wrong interface for this use-case. There's no need to compare where different articles sit in the hierarchy, or to drag "files" from one location to another. In short i don't see a tree providing anything useful to this context.
Search sounds good to me. It is increasingly the way people are used to "navigating" information, and in sometimes will be the easiest way to get around.Geoff the Medio wrote:Before implementing this, I'd suggest considering how to add UI support for a text search function.
I'm not getting a clear idea of what you are proposing. Are you saying you want to rename what's labeled "index" in my mockup but leave it unchanged, and then add a new sort of page called index? The new index being pretty much exactly what an exhaustive index in a book would be, except with hyperlinks?Dilvish wrote:Perhaps what is currently called 'Index' should really be considered as the top level of 'Contents' (and a tree structure for that such as adrian suggests would be nice), and then there could be a comprehensive index page, which lists things not just by primary title but also by alternate title and major-referenced-concepts. That would reduce the need for a text search, or a text search could be keyed off that comprehensive index list rather then needing to be a full text search.Geoff the Medio wrote:Before implementing this, I'd suggest considering how to add UI support for a text search function.
When we settle what we want, give me a few days to create some refined mock-ups. That should be more efficient all around, rather than trying to iterate layout/design stuff in code.
Re: Improved Galactopedia Design
That's the major portion of it, yes. Regarding a tree structure for the left panel, I like the fast navigation that a tree facilitates, not restricted to just the hyperlinks in the current article. A search function would accomplish a lot of that (perhaps at the expense of requiring more clicks), but the tree structure is also an outline of the content, which I personally find helpful.eleazar wrote:I'm not getting a clear idea of what you are proposing. Are you saying you want to rename what's labeled "index" in my mockup but leave it unchanged, and then add a new sort of page called index? The new index being pretty much exactly what an exhaustive index in a book would be, except with hyperlinks?Dilvish wrote:Perhaps what is currently called 'Index' should really be considered as the top level of 'Contents' (and a tree structure for that such as adrian suggests would be nice), and then there could be a comprehensive index page, which lists things not just by primary title but also by alternate title and major-referenced-concepts. That would reduce the need for a text search, or a text search could be keyed off that comprehensive index list rather then needing to be a full text search.
If I provided any code, scripts or other content here, it's released under GPL 2.0 and CC-BY-SA 3.0
- adrian_broher
- Programmer
- Posts: 1156
- Joined: Fri Mar 01, 2013 9:52 am
- Location: Germany
Re: Improved Galactopedia Design
Okay, thanks for clarification.eleazar wrote:Geoff's right, that's a "Back" button like in a browser.
I attached an example of what I had in mind, because it doesn't seem like I could explain it properly:eleazar wrote:The accordion would i think just get in the way. When a heading is expanded there usually a lot of entries underneath, not a neat little paragraph. Though the accordion could be useful in the article itself, in some cases (like species articles) where there's a lot of text)
On the left side you see the navigation, implemented as an accordion. The accordion headers only show the ancestors of the current article, with the sorted by increasing distance to the root, which gives you your absolute location in the galactopedia.
If you click on a accordion header you will be put to the according index and list it's children. For example the middle illustration shows how the index would look like if you clicked on the 'Subcategory' header. The right illustration shows the same for a click on 'Category'.
This design eliminates the need for an explicit up button. It gives the location of the article and the possibility to navigate between the sibling articles with possible similar means and upwards to more general concepts.
Below the navigation you will find a place for a free text search field.
The right side, the article view doesn't change from your proposal.
You're probably right, also this would introduce a lot of horizontal scroll given the possible indentation of the tree.eleazar wrote:The tree seems like the wrong interface for this use-case. There's no need to compare where different articles sit in the hierarchy, or to drag "files" from one location to another. In short i don't see a tree providing anything useful to this context.
I'm looking forward for you ideas.eleazar wrote:When we settle what we want, give me a few days to create some refined mock-ups. That should be more efficient all around, rather than trying to iterate layout/design stuff in code.
Last edited by adrian_broher on Mon Jun 03, 2013 9:15 pm, edited 1 time in total.
Resident code gremlin
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
- eleazar
- Design & Graphics Lead Emeritus
- Posts: 3858
- Joined: Sat Sep 23, 2006 7:09 pm
- Location: USA — midwest
Re: Improved Galactopedia Design
OK, first off what i labeled as "Index" in the original mockup, at least by publishing standards isn't an index. The label "index" more properly belongs to what Dilvish describes.
Though i don't see benefit in implemented what is essentially an analog book-style index in a computer game. Surely search and/or a hierarchical categorization are more useful than a big long alphabetical list of everything? Or are you mostly thinking of the benefits of such an index in implementing search? I have little to say about how it should work behind the scenes.
Out of time ATM, response soon.
P.S. another thing to consider is allowing an article to live in more than one location, without simply scripting a duplicate article. In my experience with other in-game 'Pedias sometimes there's more than one subcategory and article reasonably could fall under. It would be nice to give the player the benefit of the doubt, and show him the article in all reasonable places, rather than make him hunt for it.
Though i don't see benefit in implemented what is essentially an analog book-style index in a computer game. Surely search and/or a hierarchical categorization are more useful than a big long alphabetical list of everything? Or are you mostly thinking of the benefits of such an index in implementing search? I have little to say about how it should work behind the scenes.
Yeah, i was responding to a different idea. This one makes more sense.adrian_broher wrote:I attached an example of what I had in mind, because it doesn't seem like I could explain it properly:
Out of time ATM, response soon.
P.S. another thing to consider is allowing an article to live in more than one location, without simply scripting a duplicate article. In my experience with other in-game 'Pedias sometimes there's more than one subcategory and article reasonably could fall under. It would be nice to give the player the benefit of the doubt, and show him the article in all reasonable places, rather than make him hunt for it.
- Geoff the Medio
- Programming, Design, Admin
- Posts: 13603
- Joined: Wed Oct 08, 2003 1:33 am
- Location: Munich
Re: Improved Galactopedia Design
I'm skeptical about the need for tiered categorization of pedia articles (category, subcategory, subsubcategory, etc.) or multiple independent categorization (category1, category2). Either of these will makes things more complicated to store, display, an script, and when is it really necessary to subcategorize things?
I agree that a simple alphabetical index isn't of much use, but there's not much more benefit to having a list of Ships techs rather than a list of tech. Or if there is, this could be implemented as two separate categories, rather than adding the scaffolding for subcategories... That is, there'd be a "techs" category, and a "ships techs" category. The former could have a link to the latter, but there wouldn't be an "up/down" relationship between them.
For multiple categorization, if the motivation is to avoid having to double text in the stringtable file in order to have an article that absolutely needs to be listed in multiple categories, the article could be duplicated just by using a stringtable reference, without need to actually have it typed out twice.
If at all workable, I'd suggest having a full text search, rather than an indexed-only search. I've never found the latter to be of much use, as if one knows the article title, there's not much need to search for it.
I agree that a simple alphabetical index isn't of much use, but there's not much more benefit to having a list of Ships techs rather than a list of tech. Or if there is, this could be implemented as two separate categories, rather than adding the scaffolding for subcategories... That is, there'd be a "techs" category, and a "ships techs" category. The former could have a link to the latter, but there wouldn't be an "up/down" relationship between them.
For multiple categorization, if the motivation is to avoid having to double text in the stringtable file in order to have an article that absolutely needs to be listed in multiple categories, the article could be duplicated just by using a stringtable reference, without need to actually have it typed out twice.
If at all workable, I'd suggest having a full text search, rather than an indexed-only search. I've never found the latter to be of much use, as if one knows the article title, there's not much need to search for it.
- adrian_broher
- Programmer
- Posts: 1156
- Joined: Fri Mar 01, 2013 9:52 am
- Location: Germany
Re: Improved Galactopedia Design
For me this discussion is only about the UI design. The implementation is a complete different aspect and should follow the UI design.eleazar wrote:Or are you mostly thinking of the benefits of such an index in implementing search? I have little to say about how it should work behind the scenes.
There is not need, this structure is already in place. Take a look at the attached graph. That's how the encyclopedia is already organized now.Geoff the Medio wrote:I'm skeptical about the need for tiered categorization of pedia articles (category, subcategory, subsubcategory, etc.) or multiple independent categorization (category1, category2). Either of these will makes things more complicated to store, display, an script, and when is it really necessary to subcategorize things?
- Attachments
-
- encyclopedia.png (662 KiB) Viewed 15894 times
Resident code gremlin
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
- Geoff the Medio
- Programming, Design, Admin
- Posts: 13603
- Joined: Wed Oct 08, 2003 1:33 am
- Location: Munich
Re: Improved Galactopedia Design
I'm not sure what you mean by this... When I open the encyclopedia, there is a "Technology" entry in the index, which takes me to a list of all techs. There's no "Learning Technologies" list. And if there was, as far as I know, it would just be a top level list article, not actually "contained" within another category in any meaningful sense.adrian_broher wrote:There is not need, this structure is already in place. Take a look at the attached graph. That's how the encyclopedia is already organized now.Geoff the Medio wrote:I'm skeptical about the need for tiered categorization of pedia articles (category, subcategory, subsubcategory, etc.)...
- eleazar
- Design & Graphics Lead Emeritus
- Posts: 3858
- Joined: Sat Sep 23, 2006 7:09 pm
- Location: USA — midwest
Re: Improved Galactopedia Design
I don't know if the number of subcategory levels needs to be determined, if the additional effort is reasonable, it would be good if they system supported multiple subcategories. Though we should keep in mind that we currently use a pretty flat hierarchy, and are very unlikely to use a hierarchy with a bunch of levels. We don't need a GUI that supports 8 levels of hierarchy optimally.
Also i'm confident that search and hyperlink are going to be the vastly more common way players interact with the 'pedia. The hierarchical list is still better for some uses, especially if you want check out something like how many specials or species there are. But that's not the main thing.
Also i'm confident that search and hyperlink are going to be the vastly more common way players interact with the 'pedia. The hierarchical list is still better for some uses, especially if you want check out something like how many specials or species there are. But that's not the main thing.
- Geoff the Medio
- Programming, Design, Admin
- Posts: 13603
- Joined: Wed Oct 08, 2003 1:33 am
- Location: Munich
Re: Improved Galactopedia Design
I'm concerned more about how to notate and store the multi-level categorization than about how to display it. Presently things are just given a single category in the encyclopedia.txt script, and it's not obvious how to set up multiple layers. Any existing appearance of multiple layers is (I think) a combination of scripted and engine-generated articles (including the index page) that are just a list of links to other articles.
Multiple parallel categories might be easier, as the articles could be given a list of category strings, rather than a single string as is the case now.
But practically, how many articles are going to be hand-written such that there needs to be hand-written multiple category layers or even multiple parallel categories for an article? It sounds potentially useful, but really how necessary would it be in practice? Is there a list of needs-to-be-written pedia articles that don't make sense with only a single category layer?
I suppose if someone really wants to write it, fine, but it seems like a waste of time / complexity to me...
Multiple parallel categories might be easier, as the articles could be given a list of category strings, rather than a single string as is the case now.
But practically, how many articles are going to be hand-written such that there needs to be hand-written multiple category layers or even multiple parallel categories for an article? It sounds potentially useful, but really how necessary would it be in practice? Is there a list of needs-to-be-written pedia articles that don't make sense with only a single category layer?
I suppose if someone really wants to write it, fine, but it seems like a waste of time / complexity to me...
- adrian_broher
- Programmer
- Posts: 1156
- Joined: Fri Mar 01, 2013 9:52 am
- Location: Germany
Re: Improved Galactopedia Design
I'm a bit lost, what is the current status now? Eleazar, do you still plan to create those mockups?
Resident code gremlin
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
Attached patches are released under GPL 2.0 or later.
Git author: Marcel Metz
Re: Improved Galactopedia Design
I am doing some work on Pedia, it's here: viewtopic.php?f=6&t=8951&p=71288#p71288
Code, justify, code - Pitr
Attached patches are released under GPL 2.0 or later, artwork and such are released under CC-BY-SA 3.0 license.
Attached patches are released under GPL 2.0 or later, artwork and such are released under CC-BY-SA 3.0 license.