Good Designers Borrow

Micah
Micah
edited May 2013 in General Archive
An important part of design is finding inspiration, and we’re totally open to ideas for the reforging process. We’re looking for examples of great websites that are well laid out, present the information you need, and look great doing it. Importantly, we’re looking for good websites where the content is user generated, not lovingly placed by an all-powerful webmaster.

In the RPG-realm, the best examples I can think of are the plethora of RPG-related forums. I’m in no place to criticize, but many of the forums in our community are pretty blah. Forums in general are pretty blah. But do they have to be?

Knowing that a good chunk of Obsidian Portal’s page content will be disorganized, unbroken blocks of text, how can we design the overall layout to make this at least tolerable?

h3. The Task

If you have a favorite user-generated-content site, please comment here and leave a screenshot if you can. Link to dropbox or something since this forum doesn’t allow uploads. Tell us what you do and don’t like about your chosen site and what ideas we could borrow.

h3. Skip the Requests

Finally, and this is very important, this thread is not really a place to say, “Hey, it would be cool if…!” Let’s focus on getting inspiration and analyzing, rather than pumping out feature requests. Jumping straight into feature requests bypasses the important step of figuring out what exactly we like and why.

Comments

  • Micah
    Micah
    Posts: 894 edited May 2013
    I’ll start us off, and I’ll cheat a little and use Obsidian Portal itself. This is an image of my "Kensing campaign":http://obsidianportal.com/campaigns/kensing , and I’m using one of the custom backgrounds that we allow. I’m also going to focus on the background itself and how it interacts with the main content area.

    !https://dl.dropboxusercontent.com/u/145070/kensing_zoomed.png!

    h3. Pros

    * I like that it’s a real image and not just a texture.
    * I really like how the background image scales and grows as you resize.
    * The background doesn’t interfere with the main content area. It might be cool if the sidebars floated over the background, but it’s hard to know if that would just be more distracting.

    h3. Cons

    * The background image doesn’t really match up with the overall color scheme of the rest of the site.
    * The header and footer get mangled and ugly when they have the custom background behind them.
    * The black border around the main content area gives an explicit dividing line between background and content, which kind of makes things feel constrained (very subjective…) Note: This somewhat contradicts one of my pro's from above. That's how it goes, I guess.
    Post edited by Micah on
  • Langy
    Langy
    Posts: 364
    I'm likewise going to cheat and use the mockup campaign dashboard:

    !http://blog.obsidianportal.com/img/portal-dashboard.jpg!

    h2. Pros

    * It's clean with minimal pre-defined borders, allowing a large amount of screen real-estate to be utilized (as opposed to OP's 720-pixel or so main column).
    * The information normally in OP's sidebars is now handled either in a minimally-invasive top bar (that can be collapsed?) and separate 'widgets' on a single home screen.
    * The content is all contained in these individual widgets, which all have the same basic style.

    h2. Cons

    * I don't see a listing of the campaign's Fans or the Party; I assume both of those will eventually become 'widgets' as well and the only reason they aren't showing up yet is because they weren't included in the mockup, not because they weren't planned.
    * The campaign dashboard (Main section under the navbar) no longer has an area for user-entered text or a campaign-specific title image (or at least it's not shown in this picture). This means there's no place to introduce the campaign to a new visitor to it. The dragon logo on the campaign navbar could adequately serve as a campaign image/icon, or the campaign title could be replaced by one, but because this layout is friendly to multiple-resolution items it may not work out as well as the current OP title images.
    * Those widgets may not be the best for user-generated content; I'm specifically thinking about someone might get a widget that's much, much longer than the others (the Fans one, probably), leading to a large part of the dashboard just being a single long row of them. This might be avoided by making their shapes mutable; perhaps if one gets long enough it'll turn into a two-column widget (or three if the space permits), or it can become L-shaped or something.
  • Micah
    Micah
    Posts: 894
    Langy

    Excellent points, especially the thoughts about user generated content (UGC). That's something I'm constantly thinking about. Many sites are lovingly designed with every pixel placed exactly, while UGC sites have to conform to whatever craziness people can toss in.

    Let me hit a few points:

    *Private Facing*

    It's important to realize that as I'm imagining it now, the dashboard is private facing in that it's essentially only for the GM and players. They see a more utilitarian view that allows them to manage the campaign. Visitors would see a more public-facing view designed to showcase the campaign. In other words, the dashboard is there to help you quickly get things done, as opposed to being styled to make your campaign look a certain way.

    *Party Widget*

    Yes, there will be a party widget. A little secret here: I'm hoping to get it working nicely on mobile phones so that you can tap to call or SMS anyone in your group, like in case you need to reschedule the game or tell someone to bring something. I don't know about you, but my group constantly has trouble calling each other since they always seem to be missing at least one other person's contact info. Adding that to the site (privately, of course) and making it available to the rest of the group would be a big step up, at least for my group.

    I'm not sure about fans yet, I'm on the fence. The dashboard isn't meant to display _everything_, instead focusing on the things you need at your fingertips when managing your game. A big list of fans won't help there.

    *UGC and sizing*

    This will be a big issue overall. It's a problem now for people who have long usernames...

    I'm hoping to use more javascript and hiding/showing to counter this. Have 100 fans? Well, it only shows 10 in the dashboard widget and there's a link to click to expand the box and show everything. It's a good compromise between showing everything all the time or showing nothing.

    Multi-column widgets is also a good idea, and some of them will probably work that way. We're planning on redesigning everything using the "Foundation grid":http://foundation.zurb.com/grid.php and it easily supports what you're talking about. We'll just have to see how things shake out.

    Keep the ideas coming, and definitely post more sites that you like. Especially focus on UGC sites like YouTube, Vimeo, Facebook, Twitter, and the like. They all struggle with how to deal with tons of disparate content and if there's anything they do that you like, let me know.
  • Langy
    Langy
    Posts: 364
    Sounds good, Micah - though I should note you probably need a link to the public 'Home' section on the navbar, then (and I'd probably leave the Dashboard as accessible to the public, even if not fully-functional for them).

    Anyways, here's my next user-generated-content site, MediaWiki.

    !https://dl.dropboxusercontent.com/u/1657500/MediaWiki.png!:http://www.mediawiki.org/wiki/Extension:BreadCrumbs2

    h3. Pros

    * The site's graphics are pretty clean, including simple tabbed sections to view the nuts-and-bolts aspects of the site, keeping them out of the way of the good stuff. It also makes full use of the full range of screen sizes, rather than restricting the content to a small area.
    * The site has several automatically-generated sections which simplify the use of the site. This includes the following:
    ** Separating pages via categories, rather than simple tags. The difference is that categories also show the structure of the site; tags don't.
    ** The breadcrumb, showing the category structure for the current page.
    ** Automatically separated sections, which can be edited individually rather than editing the entire page.
    ** An automatically generated Table of Contents for the page, including links to each of those automatically-generated sections.
    ** Automatically generated pages can also be edited to include descriptions of what's going on on that page.
    * The site has a pretty easy-to-use markup language (similar in many ways to what OP uses, though their syntaxes are quite different).

    h3. Cons

    * The site isn't particularly pretty. In fact, the design is extremely bare-bones. I wouldn't necessarily use this as an example of what you should do aesthetics-wise.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,956
    @Micah- Love the private facing idea! I agree with Langy, there needs to be a button for the public facing section- we use the private when creating, but the public when gaming.
    Fans should be on the public facing section- we don't need it on the private side. I agree that it does not help in managing the game.
    Collapsible top bar would be great.
    Can the campaign stream just be the campaign? Knowing that Joe favorited 8 other campaigns holds no interest to the other people in the game, but knowing what has changed on that specific campaign does.
    Keeping the search function is essential- I sorely miss it on OP's home page.
    Are settings going to be included for players? Personally I do not want player access to the CSS- co-gm access is ok, but not all players.
    Love the Party widget SMS idea!
    Well, there is a bunch of thoughts....

    Just trying to help out.

  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    You might want to visit "Drupal Gardens":http://www.drupalgardens.com/ and sign up for a free account there and create a temporary site or two to check out the UI they provide on the content creation side of things.

    In case you are unfamiliar with it, "Drupal":http://www.drupal.org/ is an open source Content Management system and Drupal Gardens is a hosting service run by what is probably the primary company for paid Drupal technical support (for businesses that are using Drupal but need dedicated support). Drupal Gardens is not "pure" Drupal - it's been customized to make things "easy" on first time site developers - so while some of the UI is standard for Drupal 7 (the most recent stable version of Drupal), there are a few customized areas with really nice UI - specifically the "Appearance" section which lets you customize the total look and feel of the pages, from just a little to a whole lot.
  • Morgus
    Morgus
    Posts: 19
    Can pages have an option when editing them to mark the changes as "Minor changes", and so not have it end up in the Stream? My intention in asking is that when someone corrects a grammatical, spelling, or punctuation error not having it show up in the Stream would be nice. Some of the players in my groups either have a grasp on writing that isn't "great", or have English as a 3rd or 4th language, but nevertheless contribute quite a bit to the wiki, and so occasionally some of the players will burn through all of their pages and correct the spelling and grammar for them, which shows in the existing campaign activity stream as having a page updated when it was just a minor tweak to existing information, and it scrolls off actual "major" updates in the flurry of "update" notifications, or clogs up RSS readers with excess activity.
  • Calion
    Calion
    Posts: 144 edited May 2013
    Blogger x5. Blogger seems to me to be the gold standard to measure against in this arena. (If I've overdone the graphics, let me know and I'll move all but one under a link.)

    h4. WYSIWYG editor:
    !https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/WYSIWYG%20editor%20small.png!:https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/WYSIWYG%20Editor.png


    h4. Code editor:

    !https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Code%20editor%20small.png!:https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Code%20editor.png


    h4. Template chooser:
    !https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Template%20chooser%20small.png!:https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Template%20chooser.png

    h4. Layout designer:
    !https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Layout%20designer%20small.png!:https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Layout%20designer.png


    h4. Live view: (Obviously this is not the live version of the blog above, as my "blog":http://gaming.blog.syleria.net/ is boring.)
    !https://dl.dropboxusercontent.com/u/46737319/Forum%20images/OP--%22Good%20Designers%20Borrow%22/Blogger/Live%20w%3Abackground%20small.png!:http://fameusworld.blogspot.com/

    h3. Pros:

    * Several predefined, attractive templates (though Blogger gets quite creative in the layout options of their Dynamic templates in ways I wouldn't expect from OP; I think their Simple templates are good enough for us), including some with background images.
    * Templates are highly customizable if you don't mind getting your hands dirty with HTML.
    * 3rd party templates are easily applied--just copy and paste the code. I could see an entire Forum crop up here full of possible Templates.
    * Automatic Mobile view--with mobile Templates! (That's seriously too much to ask for.)
    * Layout widgets, with easy customization and drag and drop rearranging.
    * I like the header Blogger uses, with a "next blog" button and local search field. This could be required on non-Ascendant campaigns and optional on Ascendant campaigns, or simply standard across the entire site.
    * Excellent and easy WYSIWYG editing.
    * Instantly accessible Code view.

    h3. Cons:

    * Would require a ridiculous amount of coding to truly get up to Blogger's standards. A somewhat more modest initial target is probably wise.
    * Uses HTML, not Textile, in their Code view.
    * OP's requirements are actually significantly more involved than what Blogger is capable of, as Blogger only really compares to the Adventure Log view.
    * If you notice, HTML entities are escaped out even in WYSIWYG ("Compose") view. This is silly and should be unnecessary.
    * The Editing view is not actually live on the page, like was promised for Natural editing here--it's a different mode.

    Basically, I think using Blogger as a template for what we're doing here is a good idea. I think we want a Template chooser, a Layout customizer, and when you click the Edit button on a page, WYSIWYG and Textile modes (we also need a Dashboard, but I far prefer the mockup Micah made to Blogger's for our purposes). The real challenge here, I think, is going to be implementing WYSIWYG ("Natural") editing in such a way that it generates good Textile code, and vice versa. In other words, ideally we would not abandon Textile (though tweaking it might not be off the table), and those who wish to forgo natural editing and stay with their tried-and-true Textile techniques could do so with no fuss--just don't click the "WYSIWYG" (or whatever) button, or use it only for previewing. In fact this could result in Natural editing being implemented sooner than otherwise: At first, not everything that can be done in Textile (tables, for instance) will be possible in Natural view, and more features will be added as time permits. My only worry on this point is that users (including me) will want more features in WYSIWYG view than Textile is capable of. I often run into the limitations of Textile (indented paragraphs being my most common issue--I hate having to teach my players how to use tags in order to make the Adventure Logs pretty). But then I guess you just implement those features as HTML, just as you can now.
    Post edited by Calion on
  • Micah
    Micah
    Posts: 894
    @Langy -

    Mediawiki has been a long-standing inspiration, but I'm glad you brought it up. There are a lot of pros/cons there that are tough to weigh. For a "pro" in mediawiki, you can do some amazing things. For an amateur, it can be incredibly daunting. I also like the tabbed structure.

    @Calion -

    Lots of good thoughts here with Blogger. I'll make sure to take another look behind the scenes at Blogger. It's been a while since I looked, and I didn't realize there were so many options for customization. The template editor in particular looks interesting. I had no idea it allowed that.

    As to Textile and natural editing, my gut says that it's going to be one or the other. The natural editing is based on the HTML5 standard for "contentEditable" and that sits on top of raw HTML, no intermediary Textile. In other words, this means that if you like Textile, we will probably keep the ability to edit in raw Textile. But, if you want the natural editing, and want to view the source, it will probably be raw HTML. And, as we've seen with many of the WYSIWYG editors, the HTML it spits out may be less than pretty. We're evaluating several WYSIWYG/contentEditable editors to find one that doesn't mangle and destroy the underlying markup, and instead outputs HTML that doesn't make your eyes bleed.

    For people that want maximum control, they're going to have to be comfortable dropping down into raw HTML (divs, tables, the whole mess...). For the majority that just want it to look decent, the natural editing will be perfect.

    Finally, and I'll repeat this over and over, the target date for natural editing is December, not August. We're going to keep it in mind during this whole process, but we're keeping our goals modest and achievable. We're taking this in small steps rather than one giant leap.
  • Calion
    Calion
    Posts: 144
    Oh, yeah, I am not expecting natural editing right off. It's my pet feature, but it's probably the most work. I'll be gleeful if we actually make December.

    And as to Textile: Yeah, I went back and read your comments on the subject on Kickstarter, and realized that the plan was to have an HTML code view. That will make it simpler to not break existing pages than upgrading Textile or switching to something like Markdown: just stick the already-parsed HTML into Code view. As long as the Natural editor can parse it, we're golden.

    Myself, I'm fine with this approach; Textile only exists to get the job done for me. Others feel differently, but I'll let them fight to retain a Textile view.
  • JustinMason
    JustinMason
    Posts: 36
    Honestly, I thought December was a rather ambitious target timeframe for Natural Editing. Not only will it be the most difficult to deploy (with markup on existing record fields), but if OP intends to maintain the any of the "custom functions" on the toolbar it will require quite a bit of manual coding mods to any existing RTF/WYSIWYG component. I can foresee a lot of duplicated work going into recreating and maintaining those features, and providing expandability for future updates, when a new core editor is decided upon.
  • Calion
    Calion
    Posts: 144
    To MediaWiki: I agree that OP is more intuitive than MediaWiki. MediaWiki's Talk pages, editing syntax, and general interface are far more confusing than OP. However, it does several things that I wish OP had, such as Page History (we have that, but it could be a lot better), the ability to Watch a page, and a consistent interface. Also, though Talk pages are likely too complicated for us, I think we need _some_ way to communicate about a page without doing so on the page or in a Player Secret; perhaps a Comment feature like Adventure Logs have on every page.
  • FuManchuDrew
    FuManchuDrew
    Posts: 6 edited May 2013
    !https://dl.dropboxusercontent.com/u/622854/portal-dashboard-campaign-flat.jpg!

    Hi everyone.

    I thought I'd pop in and show the newest concept of the dashboard. After reading and considering a lot of comments throughout this board, we really tried to hone this version down into something that works as a great starting place for user generated content of all types. Looking at Blogger as @Calion noted, we decided to really focus on the core features and getting information out and organized without distraction, so we shifted into a more neutral design.

    @Langy noted that the widget space might not be the best for the variety of content flowing through this thing, so we decided to drop defined boxes for a larger, more usable space that can expand easily for the various devices you have at the table.

    We also added all the sections we had in mind for the dashboard view. We're pretty excited about the new direction. Let us know what you think!
    Post edited by FuManchuDrew on
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,956
    Wow Wow Wow!!! I want!!
    In the Adventure Log section of the main will it only be the first x words, or is it the entire log?
    Can you make the campaign stream just this campaign only?
    Search function on this page please!! Would really help.
    Like the collapsible side bar, and the smaller top bar.
    Are settings going to be included for players? Personally I do not want player access to the CSS- co-gm access is ok, but not all players.

    Just trying to help out.

  • JustinMason
    JustinMason
    Posts: 36
    Nice!
  • ReverseG
    ReverseG
    Posts: 17
    The most recent concept is all sorts of sexy. That's definitely the sort of streamlining I'm looking for :)

    For the Adventure Log, I'd prefer to have the first part (say, the initial sentence or paragraph, the "snack") as a preview, then be able to click through for the full log (the "meal").

    That revision looks mighty good though. Can't wait!
  • Quasimotocar
    Quasimotocar
    Posts: 12
    Really dig the dashboard concept! Puts all the key info in one view for a player. Would a GM version of this view include GM-only content for elements in the Adventure Log frame? Or Player-secrets content assigned to the viewing player?
  • ZacZero
    ZacZero
    Posts: 8
    One great function that I really appreciate in OP is the tag.

    I hope we don't lose it!
  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    Definitely looking good.

    I agree with @ReverseG that showing just a "teaser" on the dashboard page with a link to the individual log would be best. I do hope that there will still be a stand alone "adventure log" page like we currently have displaying full logs as well as the individual log pages.

    That said, one feature I'd like to see on the adventure log page is a "paging" feature, so that it only shows the top X entries (perhaps with a configurable value for X) and there are "older posts" and "newer posts" links. Another improvement I'd like to see is to have the "previous" and "next" buttons shown at both the TOP and the BOTTOM of each log page. I hate having to always scroll to the bottom.

    -J
  • Micah
    Micah
    Posts: 894
    Some quick thoughts:

    1 main thing to remember: We're not trying to pack every little bit of info into this page. This is where you land when you log in and want to see a quick summary of everything going on in the campaign. I'm not sure exactly how we will implement getting more info, whether it will be expanding sections to show more, or just a link out to another page. Remember, there are several other sections set aside in that sidebar, so if you want more of your adventure log posts, it makes sense to take you off the dashboard and go to the adventure log section.

    @killervp - There will be search here, and pretty much everywhere. That's what the search field at the top right is for. The intention is that the bar follows with you as you scroll. Or, you can click the pin button to keep it stuck to the top.

    For the adv. log, the intent is to show a teaser (probably based on the tag, perhaps auto-determined) and not the full text. However, this is actually quite tricky because the adv. log is HTML, not just plain text. It's a non-trivial problem to auto-split HTML, and if we get it wrong (ie. unterminated tags), the whole page is mangled when displayed.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,956
    Thanks Micah- really love this!
    Can you make the campaign stream just this campaign only? I really don't need on my stream that one of my players favorited 8 campaigns...

    Just trying to help out.

  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    With respect to creating teasers, take a look at HML purifier (http://htmlpurifier.org/) as a way of ensuring that what gets "trimmed" is not going to bork your site. According to the first page of the site:

    _HTML Purifier is "a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C's specifications. Tired of using BBCode due to the current landscape of deficient or insecure HTML filters? Have a WYSIWYG editor but never been able to use it? Looking for high-quality, standards-compliant, open-source components for that application you're building? HTML Purifier is for you!"_

    I learned about it as an admin for a Drupal based website as there's a Drupal module that allows admins to incorporate HTML Purifier into the filters that are run against new content added to the system and that can be used when creating teasers and whatnot. It works quite well, so perhaps it would be useful to you.

    -J
  • Rinzlerz
    Rinzlerz
    Posts: 5 edited June 2013
    Isn't there a way to make the dashboard customizable for the user? For instance the GM would have a dashboard organized completely different than a player would. Perhaps a options table would allow the customization and organization of the users dashboard similar to the wysiwyg in the backend of the wigets section of wordpress websites. Start with a common “default view” but allow the customization of the dashboard.
    http://codex.wordpress.org/File:widget-panel.png
    Post edited by Rinzlerz on
  • Maesenko
    Maesenko
    Posts: 325
    I'm not entirely certain if this is the right section for this or not, but I second what Morgus posted back on May 17th. A "minor change" option that doesn't mess with the update feed would be much appreciated. I know there have been times I've updated a wiki page just fixing a typo and hated seeing it look as if I had made something new (same goes for other campaigns I follow).

    ~Mae

    CotM Selection Committee

  • Matrissa_The_Enchant
    Matrissa_The_Enchant
    Posts: 18
    +1 from me on @Morgus' "minor change" flag. (Not sure how i missed it before...) Being able to fix a typo without having the system update the activity on a page the same way as for a substantial change would be awesome.
  • weasel0
    weasel0
    Posts: 433
    When doing said edits, having a "Preview" button on the page would be helpful just as it is on the page/post creation screen.
  • DreadGazebo
    DreadGazebo
    Posts: 218
    Drew, this is gorgeous _and_ functional. I'll take more time to give more input soon but I just wanted to throw that out there!
  • Quasimotocar
    Quasimotocar
    Posts: 12
    +1 on killervp's comment about filtering out the Campaign Stream so that it is only about the campaign being viewed.
  • Calion
    Calion
    Posts: 144
    I've found an awesome Wiki/natural editing system, apparently powered by Reddit (I don't use Reddit, so I don't know exactly what that means) at http://lesswrong.com.

    "WYSIWYG editor":http://awesomescreenshot.com/0881j64ea1
    "Wiki commenting system":http://awesomescreenshot.com/0e01j64ufe

    For all I care, you can just adopt whatever system they're using whole cloth; it seems pretty good. But I haven't explored things like how graphics and internal links work [Edit: by normal URLs, it looks like, which is not good enough for us]. And of course, it would have to be able to be customized extensively to work here, so an off-the-shelf system may not be worthwhile.
Sign In or Register to comment.

June 2022
Baldur's Gate

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions