I spent some time today sketching some possible layouts for the front page, a person page, and a sample content page.
The scanned sketches are attached. Some notes on each sketch.
Front page:
As I said in #1004552: Make search bar auto complete on people (w/ pics if possible), there are two primary reasons people will visit the site, a) to find a specific piece of information about a specific person (User wants to print off a picture of their great-grandpa or user wants to read a patriarchal blessing from their Grandma at FHE) or they just want to browse.
The first use case is solved pretty easily by solving #1004552: Make search bar auto complete on people (w/ pics if possible). The 2nd is a bit trickier. In thinking about it this afternoon there'll be two types of people visiting the site. A) Random googlers who run across the site and want to know if there's relevant info on the site and B) random family members who just want to learn more about their relatives.
I saw the top surname piece on tribalpages.com and really liked the idea. It helps both use cases as it helps googlers quickly see if we're related and it helps random family browsers start browsing with a certain family.
On the people sections with George Black and Thomas Mathews -- my thought there was that site admins could flag various ancestors with good informations and they'd be added to a random queue to be cycled through on the front page.
Person page:
This is pretty much like we'd talked about before. It'll show basic info about the person and collect links to every bit of content they are referenced to.
The pictures at the top are inspired by the new Facebook profiles. Pictures are the most popular feature of almost any social network and for good reasons. Humans are very visual people and hard-wired to respond to facial imagery. I think pictures of ancestor types will be popular for the same reason so we should highlight them.
Content page:
Two notes. I wrote them on the page but I'll reproduce them here too w/ more detail.
Something that two Q&A sites (quora.com and stackoverflow.com) do that I really like is that each question has an answer summary section that is a wiki that anyone can edit. On long strings of answers it's hard to get a grasp of what's the final answer.
In a similar way, you can open up a long, rambling, poorly edited story and wander what's important here and why should we bother reading it. Also sometimes, a story might not make any sense without some background information. A little optional mini-wiki at the top of the page would solve both of those problems.
Also in making this sketch I hit upon a solution to another problem that's bothered us. In previous versions of the site, we've titled content by including the name of the principle person about the content, the year they were born, and what the type of content is producing titles like "Benjamin Lynn Mathews 1892 Autobiography". Which is ugly for a lot of reasons. First, we already created the node as a type "autobiography" so placing that in the title is redundant. Second, the birth date is stored with the person so also redundant. Third, (and most annoying to me) many content doesn't have only one principle person associated with them and some content has no principle person associated with them.
So I'd like to make a proposal.
I suggest we make a distinction between "principle person" and "mentioned person". A principle person is the person (or persons) who the story is principally about. A mentioned person is every person mentioned at all in the story/content.
Each principle person (I think 3 should be the max) would be included in the title at the top and have a short bio at the right side (see the top of the right column).
Each mentioned person would be added to the "People mentioned" block in the right column. There wouldn't be a limit on the number of mentioned people.
In a similar vein. I suggest we have principle places and mentioned places. I'd suggest limiting principle places to one place and again have unlimited mentioned places. If there's a principle place associated with the content, the page should include a little inline map of the spot so people can get their bearings.
What are your thoughts on this? What's we get a rough consensus, I want to next create some HTML mockups that we can play with. From there, once we're ready, we can turn those mockups into Drupal templates.
| Comment | File | Size | Author |
|---|---|---|---|
| content-page.png | 370.38 KB | kyle_mathews | |
| person-page.png | 277.62 KB | kyle_mathews | |
| front-page.png | 260.6 KB | kyle_mathews |
Comments
Comment #1
kyle_mathews commentedOh, and on the top bar. The "People" link would jump to a page with a big search bar, a list of "popular" people, and a listing of every surname on the site.
The pictures page would jump to some sort of interface for browsing pictures perhaps sorted by date, by family, or something else. This can wait for awhile.
The other content has a drop down with each content type that people can click on to go to and browse.
Comment #2
davad commentedThat's quite an epistle :). We should probably split some of these into separate issues. Hopefully I remember everything I wanted to comment on.
Front Page
I like the front page a lot, as long as the short bios rotate. Fresh content on the front page is more likely to draw people in than the same static content or even cycling between only a few content items.
"Top Surnames" are a great idea for random visitors and for relatives to find specific ancestors, but for random family members I think it would be good to have another block below called "Top Persons" that would show a list of the top 5 or so viewed person pages (or possibly the top 5 viewed stories). Likely closer ancestors (or more interesting stories if we do it that way) will surface to the top 5 and give random family members who are first time visitors something compelling to encourage them to stay.
Person Page
This mockup is great. I like how you have the biographical info and the tree as "first class" content. Can you explain more about the "Map" and "Timeline" towards the bottom of the biographical info?
I'm not sure if this would be part of the the "Additional Content" section, but I think it would be a good idea to link to the person's stories from their page. Maybe a two or three column layout under the family tree with a picture or icon, a brief blurb, and a link to the story.
Content Page
I really like the idea of being able to put background info above the actual story. I also love the brief bio and mentioned people and places in the sidebar.
I think having primary and mentioned people and places is a great idea, but what would the visual difference be? The mockups only seem to include mentioned people and places.
Also, I don't think we should have any sort of arbitrary limit on the number of primary people or places. I can just imagine someone running into problems when they want to add some ancestors travel diary or an obituary written jointly by four people. I think it would be better visually, though, not to have a long list of empty fields for attaching a ridiculous number of primaries. If we do this with taxonomy, maybe we can use Hierarchical Select to provide one spot to put a primary and the option to add more.
Comment #3
bmathews commentedAgree w/ David, it looks like a good mockup. We need to make this work with minimal intervention from an admin. Therefore, the "Good Content" section should allow the admin to select specific nodes as Kyle detailed. However, the list should be auto-populated based on popularity, word count, etc.
I sympathize with David's idea of "Top Persons" and like the idea. However, I'm concerned with making the front page to busy. One of Google's greatest strengths is the simplicity of the interface. I don't think the value is compelling enough to add the feature.
Comment #4
bmathews commentedKyle and I have talked about making extensive use of JQuery to make much of this information available as fly out panes. I assume that is still your idea. Agree w/ David that it is missing links to other content.
Comment #5
davad commentedGood point. We don't want to make it too busy.
Comment #6
bmathews commentedWhere would the bios for the principle person come from? Would that be something that would have to be written or would we automatically generate it from biographical data?
The purpose of the ThomasAltonMathews1925Obituary convention was to have unique node titles. If we create templates that don't use a title field, then this isn't so important. Some types of content would seem to demand a title though. We have stories that need a title to distinguish them. Having three Williams Barker stories with nothing distinguishing them at the top doesn't help clarity.
Comment #7
kyle_mathews commentedFront page
@David -- isn't your "top person" block idea essentially what the person slideshow is? It wasn't clear perhaps from the sketch but the slideshow would be rotating through different people w/ auto-selected content about that person (e.g. their autobiography, or stories about them etc.). @Ben I like your idea of auto-populating the list of people to rotate through rather than selecting them. That's more impartial and easier for us and definitely easier for others to use.
Person Page
@David By timeline I mean something like http://www.simile-widgets.org/timeline/ (the drupal module http://drupal.org/project/timeline). By map, I mean create a map with the different events in the person's life mapped. So where they were born, died, where married, etc. So say you have someone born in the old world and then emigrated, on the map you'd be able to see quickly where these different places where. Both provide alternative way of visualizing a person's life and I've seen them used on other genealogical sites rather successfully.
I ran out of room at the bottom which is why I didn't sketch anything for the rest of the content but my idea was that for each content type associated with the person there'd be another section linking to the stories, autobiographies, etc.
Content page
@David, I didn't think of adding a bio for the primary people until the end so it's squeezed in at the top of the right hand column. George Black is the example primary person. @Ben the bio would be auto generated. I'm thinking something as simple as their name, a picture (if available) and when they were born/died.
@David, I agree that there's no point at putting an arbitrary limit on primary people. As long as it's very clear in the descriptions for the fields what a primary person is and what a mentioned person is.
@David if you set the allowed number of fields to unlimited, on the node edit form Drupal will show 3 fields and have an "add additional field" button there to add more. So we don't have to worry about a long list of empty fields.
@Ben I agree some content does need titles like the stories example you mentioned. Others like the gravesite content type would definitely not need a human-generated title. So we'll have to look at the different content types and decide which need a title and which don't.
Comment #8
kyle_mathews commentedIf you guys could clone https://github.com/KyleAMathews/Family-History-distro-HTML-mockup and comment on the frontpage/person/content mockups that would be much appreciated. I'm most happy about the front page and content mockups. The person page I think needs more work. You should be able to click around just fine from the index.html page.
Comment #9
davad commentedI took a look around and then showed Jessica. We both really like how the content page is looking. The wiki part is set off very, very nicely stylistically.
On the front page, those two blocks need some tweaking. Maybe we can borrow from what's being done on the content page. Perhaps a dotted border with no rounded corners and a grey background? Maybe no border with the light blue background? I'm not really sure. I tried the border color #34678c and border-radius of 5px. I liked it at first, but...maybe a grey instead of a blue or dark, dark blue?
Comment #10
kyle_mathews commentedI've redone the front page blocks per your suggestion David and like the change. Tell me what you think there.
You didn't mention what you thought about the sample person page. I revamped some things there as well.
Also, on the autobiography page, my Mom pointed out that you'd want to reference people who aren't are relatives. So I added John Taylor as an example. I think there'll need to be two fields. One for the person's name (auto complete on people on database but also allow free entry of other names) and one for the relationship to the main people (e.g. George's daughter).
One other thing. Beth was complaining things looked "boring" which sparked the thought that we're in 2010 and can use more than 5 fonts on the web. So I went off to http://code.google.com/webfonts and with my Mom picked out IM Fell. The H1s have been converted to use that.
Comment #11
kyle_mathews commentedAlso, if you want to play with free fonts, http://www.fontsquirrel.com/ is another good source.
Comment #12
bmathews commentedfront page looks fine
Not sure I love Mom's choice for a headline font. That is very far down the list of things to care about though.
Person page has all these square boxes. Looked at the source and they are divs. Still confused what they are for. Pictures? Why is the Marriage line blue? I assume the gravestone entry only shows if there is a gravestone item?
Story page looks good. Assume "people mentioned" would all be linked. What link treatment are you proposing for the John Taylor class of people? Where will the links for place go to? google maps?
Comment #13
kyle_mathews commentedThe square boxes are photos. Traditional newsprint mockups use boxes w/ a cross to indicate photos but I didn't know how to do that with CSS so just did boxes. My inspiration for that particular bit of the layout was the new Facebook profile which looks somewhat similar.
The marriage line is blue because the css classes I imported from Blueprint (http://www.blueprintcss.org/tests/parts/elements.html) automatically add stripes to every other table row which is considered a best practice as it makes it easier to read across long table rows -- see http://www.alistapart.com/d/stripedtables/comparison.html
Yes, the gravestone column would only show up if there's actually items.
My idea is "John Taylor" type links would go to a person-lite page that would show (like regular person pages) every content that's linked there. Which would be pretty interesting for people like Joseph Smith which a lot of converts would of mentioned. We could see there which of all our ancestors mentioned Joseph Smith or other church leaders. This will be a bit tricky to handle technically. Perhaps the easiest thing to do would be to just treat them as regular Person entities but not add more additional information than needed. So for Joseph Smith we could perhaps add a photo and some basic info about who he is but most other people that are mentioned (say the gentlemen that ordained George an Elder) there'd be nothing on their pages other than their names + the (probably) one page that links to them.
Individual places would have their own place as well -- so we could see every event/content associated with Antimony Utah. The "Map of places" link would open up a new page with a map with pins on each place mentioned on that page/content.
Comment #14
kyle_mathews commentedThis isn't an active discussion anymore as work has shifted from mockups to building the actual product. Marking fixed.