People Module
Report
For the people module, I will be designing a community website that caters exclusively to the interests that my peers share in common, in this particular case I have decided to base it around video gaming, this should provide the group a communications hub which will give us the means to share game related information, communicate, plan events, post videos and pictures in one community instead of depending on multiple websites and communication software.
The problem was made apparent to me through word of mouth, discussing video games with a group of people that typically have different preferences, styles or background history of playing video games often causes clashes. For example, those of us that often PC gamer would naturally learn how to cope with the huge list of 3rd party programs available that help make connecting to your friends easier, such as Xfire, however those of us within the group that are mainly familiar with console gaming services such as Xbox LIVE which acts as a unified on-line communication system with strict and basic interfaces may struggle when navigating the open sourced PC platform.
Services such as Xfire, Xbox LIVE and Gamespy influenced my decision to create this project, communication software and websites such as Myspace, Facebook and Deviant Art are incredibly useful for large communities of people, however I felt that it was necessary to design a simplistic website, that offers a similar set principles to a much smaller community of people, a design set that most novice guild,clan or team administrators could use with their own websites.
The main goal of this website is to offer the content that my peers desire in a basic format, one thats quick to navigate and which offers my peers the chance to unify their video gaming interests by placing them all within this community hub, important information such as what games they play, what consoles and software they have at thier disposal and most importantly communication software and server adresses.
In order to understand the principles of good user interface design, I have researched a set of principles from Xristine Faulkner’s “Usability Engineering” Book, which contained Nelson’s Heuristics consists of ten design principles that create a well crafted design interface, a set of principles in place to make an interface easier for the end user to control and navigate.
Other aspects of my research include the basic foundation of what is required of websites in order to suit multiple users needs, an example would be statistics research that indicates that 17% of consumers still use monitors that have a native resolution of 800 x 600, indicating that it is still not wise to create a website template that exceeds this number in fear that you could alienate these members by forcing them to scroll across your website frequently just to view the content. I have also looked into allot of different design principles of what makes a website easy to navigate, what makes a website basic yet informative and the use of non-standard sidebar or top bar navigation, I will aim to incorporate these principles into my final re-design.
This website that I have designed for small team based gaming communities is simplistic, the website itself acts as a hub for other services, to make one unified entity, you-tube, photo-bucket and Invision are all individually very useful sites, unified into one profile they make the perfect setup for any video gamers needs. The rough sketchs and peer questionnaire helped me mold the layout into something presentable, the final re-design is basically there to give the viewer a better idea of what I am trying to achieve.
My work will be presented to my peers via a PowerPoint presentation, this presentation will include my design process, explanations of the different template pages, and visual representation to further explain my design.
Presentation Files
I will Post this soon.
Re-Design Prototype
Here you can find pictures and detailed annotations of my Final Design, I would like to stress that the point of this project is the interface and functionality, therefore the current images/graphics are purely there to merely represent the website to give an basic idea of what the website would look like if it was actually created.
Splash Page
1 – Black Static Back round, this is static between all pages, the set back round colour of the website, which has no real effect on the functionality, only the aesthetic.
2 – Splash Banner, the splash banner is set here purely for aesthetic as well, I have decided not to link it to the Home Page, it defeats the purpose of the “Enter” button.
3 – Enter Link, does what it says, allows access to the home page.
Home Page, Not logged In.
This page is what will appear when you first enter the website, the links are disabled and the additional content on the homepage is empty until you have successfully logged in, since this is a closed network community, accounts can only be made by an Administrator on request in person.
Home Page, once successfully logged in.
1 – Head Banner, The splash banner basically, although looking back on this, I might decide to make it smaller.
2 – Top Navigation Bar, pretty standard design, I felt that it was basic and easy to use enough to leave alone, some things should be let the way they are.
3 – User Box, This box displays your name, log-in details and avatar(Picture), while also offering links to your profile page and log out, it also offers the “Not “user name”? Click Here” in case the user doesn’t log out
4 – Dynamic up datable “Game of the Week” banner, linking information from that particular game and showing who plays, what servers, character names for this example ( World of Warcraft )
5 – “Submissions” slider, similar to what you would find on an Ipod, Ipod Touch or Iphone, scrolls with movements.
6 – Spotlight, updated personally by the admin.
7 – Featured member box is updated again by the administrator, this feature like the spotlight feature is more a community novelty.
8 – News feed, basically a shortcut from the forums “NEWS” section that is posted by administrators, direct feed from the forums.
9 – Shout Box, basically a mini chat hub, for anyone who’s online at the same time, simple box application that has no links to anything.
10 – Recent posts, similar to the news section, this directly links to the forums, allowing for faster access to new topics straight from the home page, as apposed to scrolling through forums.
News, Profile and Events Template
This page is a simple template, with a backing and text, displaying various textual information, and possible pictures/Gamer tags, gamer tags are direct links from gaming sercives that display information of a particular gamer’s gaming account, including I.P , GAme preferences, Servers ect, having this all on one page helps us all navigate,communicate and interact quicker and more efficiently.
Video/Picture Template (Flash)
1 – Sliding selection, similar to the submissions sections, similar to the interface design of Iphone’s album selection.
2 – Game selection drop down box, dynamically taken from the list in the forums, you select the game and the sliders appears pending on how many videos/pictures there are.
3 – Information, dynamically switches based on the information of the video once its in the centre, for example this beta left4dead picture, has details below.
This design template can be used for Pictures, Videos and Member selection.
Direct Link, You tube or Pictures
1 – Backround Overlay, This is purely a navigation aesthetic, to hide the backround of the website so that the main focus is on the video/picture itself.
2 – Youtube Direct Link, any member can easily place direct linked videos from youtube, instead of us having to search eachothers different video hosted locations, they can veiw them here, a small improvement, when it all piles up, the idea is that it saves time.
3 – Close X, simple to see, well lit exit, one of the guidelines of Nielsen’s Hueristics.
Peer Review & Analysis of first prototype design
Nielsen’s Heuristics
I was advised by Stuart to check out the book “Usability Engineering” by Xristine Faulkner, there is a section on page 188 that could help me out greatly when resigning the Interface, a set of principles by “Nielsen” called “Nielsen’s Heuristics.
“Heuristic is a method to help solve a problem, commonly an informal method. It is particularly used to rapidly come to a solution that is reasonably close to the best possible answer, or ‘optimal solution’. Heuristics are “rules of thumb”, educated guesses, intuitive judgments or simply common sense.
In more precise terms, heuristics stand for strategies using readily accessible, though loosely applicable, information to control problem-solving in human beings and machines”
I have used Nielsen’s Heuristics in the form of a questionnaire to my peers (5 Peers were questioned) about my prototype design, the results are as follows:
1. Simple & Natural Dialogue? - Yes, my web site’s layout generally has simple and natural dialogue, text formatting match’s the boxes and does not clutter the site, coherent and minimalist text.
2. Speak the user’s Language? – Yes, the dialog is expressed clearly in words, allot of gaming speak is the right language, since this website is targeted at a specific audience, there is no real need to “tone down” the more dialogue aimed at gamers.
3. Minimise the users Memory load? – Yes, most of the functions are done with visual representation as apposed to textual instructions, there is nothing too complicated in my design that requires allot of information for the user.
4. Consistency? – Yes, the layout design is consistent, It was suggested by the third person I questioned that I use both Top, left and right in my navigation as apposed to just the left.
5. Feedback? – No, I haven’t not included any visual or textual feedback at this time, this is something I will work on for the re-design, suggestions were offered such as “Roll Overs” “Sounds” and Animations.
6. Clearly marked exits? – Yes, the navigation bar is always present, so switching pages is effortless, there is no real emphasis on exits.
7. Shortcuts? – No, Although this sounds interesting, this kind of website does not require expert knowledge or will not benefit.
8. Good error messages? – No, this will be worked on, when I incorporate a log-in system into the final build.
9. Prevents errors? – I Would hope so, since this is the design process, its impossible to say.
10. Help and Documentions – No, visual representation is self explanatory.
Suggestions
Redesign the Logo - 1337 is pretty generic, if I was to make this more than a prototype I would indeed do this.
Make the Search Bar Smaller – Its agreed that it takes up way too much space beyond the splash page, therefore I will trim it down.
Picture/Video/Sound – To be done in flash, instead of a blog-like format, for easier cycling through, while also making the page more aesthetically pleasing.
No Public Forums, Only a application Email – For use if we decide to extend the reach outside of the course community, as in a proper “clan”, instead of them being allowed to access the forums, they would have to reach out to us in game or by an application email, not knowing anything about us without participating.
Events – Keep records of events, posted on the main page in a sort of blog format, with scrolling down enabled.
Login/Password System – Of course one of the fundamental ways of making exclusivity is by creating User Accounts, that require activation from the Administrator.
Reflection
My initial designes were deemed too basic, hopefully with the editions listed above, the website will fulfill its purpose in being a more “Secretive and Exclusive” website design, so far I have come to the conclusion that the website itself will most defintly be designed to cater to a minority, which is of course my intentions to begin with.
I am also moving towards the idea of making it completely user friendly, while maintaining the level of content required.
First Prototype
For the first prototype, I have not tried to made it aesthetically pleaseing, these are simple sketchs/painted templates to show to my peers, most of the Ideas will be explained through my voice and thier ability to comprehend what I invision.
Bare in mind aswell, I’m only putting up a few very basic examples, in order to avoid clutter this page, the whole intention here is to present typically average looking layouts to my peers and ask them what they would like improved apon in both Aesthetic and Functionality.
Example 1
Example 2
Example 3 ( Iphone Camera is NOT good. )
Useful Website Communities
I decided to add this into its own column, because its useful for future reference, I will also post this on my main blog page, for those interested!
Just because the left-, right-, and three-column layout configurations are the bread and butter of most web page designs doesn’t mean you have to be confined to these layouts. A plethora–yes, a plethora–of design showcase and gallery sites have been created to feature new and innovative ideas that might help you think outside the box, including the following (just to name a few):
- CSS Zen Garden at http://www.csszengarden.com/ — This site is the original showcase of fresh ideas for CSS. Even if you don’t intend to design a CSS Zen Garden template, it’s a great source of inspiration.
- CSS Beauty at http://www.cssbeauty.com/ — CSS Beauty is both a gallery of well-designed CSS web sites and a portal to the CSS design community.
- Stylegala Gallery at http://www.stylegala.com/archive/ — Stylegala is a great source of information about web design and standards, but the gallery features only the best-of-the-best new CSS designs.
- CSS Vault at http://cssvault.com/ — The CSS Vault’s gallery archive goes back to November 2003, so it’s not only a great source of inspiration, but a historical repository of great CSS design.
- Design Interact Site of the Week at http://www.designinteract.com/sow/ — Just for good measure, here’s one gallery that doesn’t concentrate on CSS-based designs. Design Interact is the multimedia- and technology-focused spin-off of Communication Arts, a leading trade journal for visual communication and graphic design. Design Interact has been highlighting (and archiving) a new and unique web site every week since January 1998.
Research
What is a Website?
A website is a collection of Web pages, images, videos or other digital assets that is hosted on one or more web servers, usually accessible via the Internet.
A Web page is a document, typically written in (X)HTML, that is almost always accessible via HTTP, a protocol that transfers information from the Web server to display in the user’s Web browser.
All publicly accessible websites are seen collectively as constituting the “World Wide Web”.
The pages of a website can usually be accessed from a common root URL called the homepage, and usually reside on the same physical server. The URLs of the pages organize them into a hierarchy, although the hyperlinks between them control how the reader perceives the overall structure and how the traffic flows between the different parts of the site.
Some websites require a subscription to access some or all of their content. Examples of subscription sites include many business sites, parts of many news sites, academic journal sites, gaming sites, message boards, Web-based e-mail, services, social networking websites, and sites providing real-time stock market data. Because they require authentication to view the content they are technically an Intranet site.
Design To Build!
Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even now it’s still important to think about how you are going to build a site when you’re still in Photoshop. Consider things like:
- Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It’s important to know what can and can’t be done, which is why I believe all Web designers should also build sites, at least sometimes. - What happens when a screen is resizes?
Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned? - Are you doing anything that is technically difficult?
Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided. - Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build. - For large sites, particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don’t always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.
Navigation
One of the most frustrating experiences you can have on a Web site is being unable to figure out where to go or where you are. I’d like to think that for most Web designers, navigation is a concept we’ve managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it’s taking you. Aside from the common sense, it’s also important to make navigation usable. For example, if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for a user.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading or a ‘down’ version of the appropriate button in your menu. In a larger site, you might make use of bread crumb trails, sub-headings and a site map for the truly lost.
Guiding the eye…
Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have.
A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). his is a good thing since you probably want a user to immediately know what site they are viewing.
But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.
What your user should be looking at is up to you, the Web designer, to figure out.
To achieve precedence you have many tools at your disposal:
- Position — Where something is on a page clearly influences in what order the user sees it.
- Color — Using bold and subtle colors is a simple way to tell your user where to look.
- Contrast — Being different makes things stand out, while being the same makes them secondary.
- Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
- Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?
Website Design Principles – Resolutions
In comparison to the fixed-versus-liquid debate, the arguments about designing for particular screen resolutions are much more tame. When designers say that a site is designed, or optimized, for a particular screen resolution, they’re actually talking about the resolution of the viewer’s monitor. The debate has centered around whether or not we should design sites in such a way that people using a monitor resolution of 800×600 pixels could see the entire width of the content area with their browsers in full-screen mode. Given that we must account for sidebars and browser borders, this approach would see us design a content area that’s approximately (or that could be resized to approximately) 750 pixels wide.
As of July, 2006, W3Schools’ screen resolution statistics showed that the number of W3Schools users who set their screen resolutions to 800×600 pixels had dropped, but not to the point that it could be safely ignored–see Figure 1.30.
At the time, this resolution still accounted for 17% of users, but that number had dropped by 3-5% every six months for the previous two years. Does this mean that as soon as those displays set to 800×600 have been replaced, we can all start to design sites that are 1024 pixels wide? Hardly. Even if everyone was using a resolution of 1024×768 pixels or more, not everyone will use your site with the browser window maximized.
Monitor Resolution Statistics of the Average Person...
Although statistics like those provided by W3Schools help to give us reason to design for higher resolutions, the most important factor in web design is the end user. If the web site you’re building is for web professionals and people who are likely to use the latest computer equipment and high resolutions, it may be safe to push the design envelope and create designs that are wider than 800 pixels. The goal, though, is to prevent users from needing to scroll from left to right in order to read content.
Bread & Butter Layout Principles
Most of what we’ve talked about thus far has been design theory. Theory’s good, but it can only take us so far toward understanding why some ideas work–and others don’t–in a web site’s design. In my opinion, examples and practice are much more valuable. Most academic graphic design programs include a curriculum that’s rich in art history and fine art. These classes provide a great foundation for an understanding of graphic design from an art perspective, but they do little to prepare you for the specific challenges you encounter when you take your designs to the Web.
Pablo Picasso once said, “I am always doing that which I can not do, in order that I may learn how to do it.” While I like to take that approach when designing a new web site, it’s important first to know what you can do. When you look out across the Internet, you can see that the possibilities for layout really are endless. But, as I said before, only a few of those possibilities make good design sense. That’s why we see certain configurations of identity, navigation, and content over and over again.
Gaming/Clan/Guild/Team based Websites & Communcation
1337 Bond Symbol Example
“In computer and video gaming, a clan or guild is a group of players who regularly play together in a particular (or various different) multiplayer games. These games range from groups of a few friends to 1000-person organizations, with a broad range of structures, goals and members. The lifespan of a clan also varies considerably, from a few weeks or months to several years. Numerous clans exist for nearly every online game available today, notably in first-person shooters, massively multiplayer games, role-playing games, and strategy games.”
Why would people want to join a clan with eachother? Specifically why would it be useful for our 1337 group to have its own gaming community website?
“Joining a clan places one within a social network which provides access to resources, knowledge, and help needed to accomplish many game related goals. In addition, banding together with like-minded players seems to fulfill a human desire for social interaction. Taken together, these two factors can vastly enhance the gameplay experience of many players.”
Communication
Clan Website Example
Website Design will be the main focus of my project, the benefits of a website are numerous amongst gaming communities:
“A website is often the central focus for publicizing upcoming activities such as training sessions or official matches in leagues. It can also be used for sharing tips and tactics, jokes, and general discussion topics. This all helps people to get to know each other and build team spirit, yet conversely may also be the source of personality clashes.”
However as part of my website it is crucial to use other tools, while they are not in anyway designed by me, I will include them for the sake of explaining what content will be inbedded or linked within my website that help communcation between clan members:
Communcation Via Voicechat
Ventrillo Voice Communication Software
Being able to talk to your team during a match and change tactics instantly gives an obvious advantage, but it is also widely used for chatting outside of competitive play. Several Voice over IP applications are available free to download that enable players to talk to each other via their computer, using a microphone or headset. TeamSpeak and Ventrilo are in common use, both require a small central server, either rented from a hosting company or hosted on someone’s computer or server. Other voice chat services include Yahoo! Messenger, MSN Messenger, AIM, Skype, and Google Talk.
Communication Via Messenging Services
Xfire Software, Friends Lists, Server Favourites, Messenger & Auto-Join Friends, comes with Profiles and Blogs!
“
Instant messaging by utilities such as IRC, MSN Messenger, Xfire, or GameStreet Talk allow gamers to write simple text messages to each other providing both have the utility and have set up an account on the system. Many games actually provide simple in-game messaging facilities. A player can send a message visible to everyone on a server, or this can be restricted to just the player’s team. Such features sadly lend themselves to abuse. The less savoury or immature players use it as a method to be obnoxious or disruptive.”
Similar to an actual igame clan/guild across many online games, a website can be structured in a similar fashion to what is explained below:
“In MMORPGs and strategy games the game often features a separate mechanism used to identify the clan a player belongs to. For example in Dark Age of Camelot, the player’s guild appears in full below the player’s name. In games that allow players to customize their appearance (usually by picking the color of their attire), clan members might all share a similar look, or bear their clan’s logo on their character’s outfit. The MMORPG Guild Wars has Guild Capes which can be customized by the guild master. The MMORPG World of Warcraft introduced tabards, in which a guild master could customize a tabard to any look he wanted, and then guild members could buy one so they’d all be wearing guild colors. The game City of Heroes goes even farther. A player can switch between their entire regular costume colors and the “Supergroup’s” costume colors. It can also be refined to not apply at all or to only apply a certain areas.”
A Website can obviously be custimized to suit the user, imagery to reflect the mood or type of clan/guild/community, for example, if we was to name ourselves “1337 Killerz” ( Agressive example I know 
), I would most likely design a darker “Evil” website theme, or something along the lines of “Commando Army” style pending on what genre is the focus. For this website however there will be no particular game focus, so the theme will likely be universal, something neutral.
About
The People Brief Assignment requires us to Identify a problem within a community, and design a solution to fix that given problem, wether its a fictional problem or a problem you have identified in a community. I have decided to design a website that serves exclusivly to the people on our course, a private/exclusive website community for those of us on the BA Mobile,Web & Games Design course, or in short 1337.
In this case, I’m aiming to create a website based on something we all have a common interest in, in this particular case I would think its safe to say that everyone in our group likes Video Games to some degree, so I have decided to make that the focus of this community, preferably an exclusive gaming “Clan/Guild/Team”.
However, the website is designed to be hard to access, hence the reference to “1337″ from its history of secretive societys of hackers, the site will not really push “Ease of use”, for this project I will try to break the mold, making a somewhat complex website catered to our tastes as apposed to the public.
