Project Discussion Part V: Critical Thinking

Throughout this series, we’ve talked more about the practical side of the project such as layout and design. This is all relevant to the project, but we’re missing something here. What we are missing is all the critical questions that need to be asked. These are the underlying themes – even the reasons – for this project. This is not necessarily a question of why and how, but more raising the issues around them. This is the subject of Part V.

Q1: Sharing what?
Since my proposal is about sharing between people, a good starting point would be to ask what exactly it is they are sharing. My first thought would be about sharing of academic articles/journals/texts, as I wanted to make it easier for such communicating. We can 100% be sure that academics must talk to each other on projects.

I envisioned my approach to be similar to already existing styles. When a user uploads a file, it is logged and ‘stored’ on the system, which is the database. The user may view and makes changes to it or upload a newer version. If applicable, multiple users may also look and edit if it’s a larger project.

But what about anything other than a text document? Not necessarily photos or videos, but things like graphs, research findings, voice recordings? In most cases with other sharing sites, this wouldn’t matter as it involves the same principles of sharing as text documents do. Technical compatibility may come into it (different type of file etc), but generally the default files work. The purpose of the project is to allow people to share and communicate more easily with others; whether this is sharing text or visual items.

Now we come to some problems. This is largely to do with legal issues in terms of copyright. Whilst a piece of work that one does is ‘theirs’ but what happens when it is uploaded to an external database? Does that work still belong to them or is it ‘owned’ by the system? This is an issue that has long-term implications as it can be very easy to infringe on copyright.

Normally when signing up to new sites, you must consent to several terms and conditions. Not everyone reads it (me included), but these guidelines explain what happens to your work. Here is an example of the legal terms in the case of Steam’s Workshop component:

‘6. USER GENERATED CONTENT
A. General Provisions
‘User Generated Content’ means any content you make available to other users through your use of multi-user features of Steam, or to Valve or its affiliates through your use of the Software or otherwise.

You grant Valve and its affiliates the non-exclusive, irrevocable right to use, reproduce, modify, create derivative works from, distribute, transmit, broadcast, and otherwise communicate, and publicly display and publicly perform, your User Generated Content, and derivative works of your User Generated Content, in connection with the operation and promotion of the Steam site. If you use Valve cloud storage, you grant us a license to store your information as part of that service. We may place limits on the amount of storage you may use.

If you provide Valve with any feedback or suggestions about Steam, the Software, or any Valve products or services, Valve is free to use the feedback or suggestions however it chooses, without any obligation to account to you.

B. Content Uploaded to the Steam Workshop
Some games or applications available on Steam (‘Workshop-Enabled Apps’) allow you to create User Generated Content based on or using the Workshop-Enabled App, and to submit that User Generated Content (a ‘Workshop Contribution’) to one or more Steam Workshop web pages. Workshop Contributions can be viewed by the Steam community, and for some categories of Workshop Contributions users may be able to interact with, download or purchase the Workshop Contribution. In some cases, Workshop Contributions may be considered for incorporation by Valve or a third-party developer into a game or into a Subscription Marketplace.

You understand and agree that Valve is not obligated to use, distribute, or continue to distribute copies of any Workshop Contribution and reserves the right, but not the obligation, to restrict or remove Workshop Contributions for any reason.

Specific Workshop-Enabled Apps or Workshop web pages may contain special terms (‘App-Specific Terms‘) that supplement or change the terms set out in this Section. In particular, where Workshop Contributions are distributed for a fee, App-Specific Terms will address how revenue may be shared. Unless otherwise specified in App-Specific Terms (if any), the following general rules apply to Workshop Contributions.

·    Workshop Contributions are Subscriptions, and therefore you agree that any Subscriber receiving distribution of your Workshop Contribution will have the same rights to use your Workshop Contribution (and will be subject to the same restrictions) as are set out in this Agreement for any other Subscriptions.
·    Notwithstanding the license described in Section 6.A., Valve will only have the right to modify or create derivative works from your Workshop Contribution in the following cases: (a) Valve may make modifications necessary to make your Contribution compatible with Steam and the Workshop functionality or user interface, and (b) Valve or the applicable developer may make modifications to Workshop Contributions that are accepted for in-Application distribution as it deems necessary or desirable to enhance gameplay.
·    You may, in your sole discretion, choose to remove a Workshop Contribution from the applicable Workshop pages. If you do so, Valve will no longer have the right to use, distribute, transmit, communicate, publicly display or publicly perform the Workshop Contribution, except that (a) Valve may continue to exercise these rights for any Workshop Contribution that is accepted for distribution in-game or distributed in a manner that allows it to be used in-game, and (b) your removal will not affect the rights of any Subscriber who has already obtained access to a copy of the Workshop Contribution.-
– Steam Terms and Conditions

From that lengthy excerpt, the gist is that Valve has the ‘rights’ over any UGC that gets submitted into the Workshop. They have the right to distribute or change people’s work. In addition, Valve has the right to remove content at any time. This is standard practice nowadays. People don’t realise that even an innocuous wall post on FB is now ’owned’ by the system. The deal is that if you use Steam to promote your work, you grant Valve content rights over your design.

This is going to be slightly different for my own design. Strictly speaking, users would not be uploading UGC in the sense that they are creating something ‘new’ to sell. What they would be doing is uploading work in a similar manner, so with this in mind, I would probably adopt the same legalities. Users would use the system as a database for storage and sharing, yet because they use it, it would fall under that they use an external system to store their work.

Finish conlcusion.

Advertisements

Project Discussion Part IV: Analyse This

I did not discuss, fully, the designing process of the wireframe in Part II. In Part IV, we’re looking at how to design the Profile Page using the advice and tips from the previous post.

Step 1: Steam’s Design

This is how Steam designed their one ( May 2013).

q7ACcV4

You can’t see below, but what is there is a series of comments from the user or their friends. These hold a total of 6 comments, before moving to another page. Let’s digest what we can see. The bluer box contains user information: picture, name and short description. The ‘Level 8’ box on the right is a feature unique to Steam, which is based on various badges they’ve collected during their time.

The middle box contains the user’s gaming activity. This includes playing time, achievements earned, and other game information. This logs information up to 3 games at a time. On the right side contains extra information, such as groups, friends, games, screenshots and videos. Essentially, this is the player’s personal portfolio of their Steam career. Here is where their collection of items is stored.

You can just see the listing for groups just below. This denotes various groups the player has joined, up to 3 shown. Below that is another listing for friends, with up to 6 shown at any one time.

Step 2: Pen and Paper

That is the Profiles in a nutshell, and the challenge here is the transition to my own design. Firstly, because certain elements will be unique to Steam, these will not be included here. They include game information (because are academics going to play that much?!) and Badges, because ‘levels’ are not important here.

I felt it helpful (to me at least) to so a paper-pen sketch first. As a first iteration, I could then understand more of how things were going to work. I regret that annotations are hard writing here, but they are included in the picture..

20130704_120416

Steam helpfully orders different sections so that they are more apparent. I will do the same. I decided to go with a two-tier leveling again. The upper half contains user information that they add themselves. The lower half contains information about their community activity, including friends added.

The challenge comprises of trying to figure out how the mechanics work. Do I have it so when a user clicks a button, it opens a new window, etc? Ideally, all I want to include is those elements that make it social enough so that people are able to collaborate with others. I try to  follow the rules and keep things simplified.

Step 3: First Draft

The pen-paper sketch is only half the story. Translating this into Lumzy will be a further challenge, yet also an opportunity to test things online.

Profile Page

So far this is what I have wireframed. This is similar in design to Steam’s and my pen-paper sketch, but without the clutter of annotations. Perhaps I will even keep this design. Again, I’ve kept it two-tiered, with the upper level the user information, and the lower community information.

The box on the left denotes the user’s specific content, such as videos or ongoing projects. The right box contains the user’s community information, such as friends. Those two are kept separate to allow better differentiation. The space in-between is where the posts will feature. I still haven’t quite come to a decision about how these will be stacked. I can choose to have them as a never-ending scroll (like Facebook), or have a max number at once before shifting to another page (like Steam). The frequency of the posts will depend on how often the user and/or others post themselves.

Each text will be a clickable link, which refreshes into a new page. I find that is the tried-and-tested method of web design, since that it is commonly used. Anyway, I want to keep is relatively easy to use and simple. Creating a profile should not be a complicated process.

Step 4: Second Draft

Having prepared a first version in Lumzy, I have to look at it and think areas of improvement. I designed the first version to make user interactions as simple as possible, but there were a few things I could still do.

Profile_Page2

This is the second version, of which there is little change. Mainly what I did was reshape certain elements to be more standard, as well as adding more fuller search options at the top. I also decided that for comments, I would order them using the next page options, which is below. Having a continuous scroll of comments would seem too laborious. Whilst having next page is not ideal either, I felt that comments could be controlled better be regulating how many are shown.

Unfortunately, Lumzy did not have the tools which would allow me to test how the user would interact. For instance, I couldn’t see how new comments would be posted; how users would navigate their content portfolios. I suppose there’s one good thing though; that having a design to show for is a step forward.

I’m not sure what else I can do here. I have a design that I am happy with.

Project Discussion Part III: Effective Web Layouts

Hello, and welcome to Part III of this project discussion. Here we are talking best practices to designing layouts. Warning: VERY long post ahead.

Imagine you’re browsing the net and come across a website that sounds interesting. But the layout is a horrible mess; so bad it hurts your eyes. Colours clash, buttons are oversized, links lead to nowhere…

There are clearly better ways to design a layout than others. No good website will have anything that makes it difficult or unusable to the user. That’s in part why wireframes are used.

Joshua Johnson provides some tips to creating well-designed layouts. One: keep it simple. ‘Designers…have a tendency to approach a project while thinking that it needs to be completely unique in every respect to be worth our time and the client’s money. Great looking websites often use layouts that are fairly simple and not the least bit unique…but your average client just wants something usable, clean and professional’ (Johnson, 2011).

There’s that old saying: if it’s not broke, don’t fix it. A large number of websites employ the usual rules to design, such as search bars at the top. This isn’t as unique as it sounds, yet makes perfect design sense. Keep it simple.

Q: What are the ‘do’s’ of web design?

Keep it structured! This includes ordering elements so that they fit appropriate to each other, both in terms of size and content. This is very common in websites, as an unstructured layout is confusing and irritating. That does not mean you can situate elements anywhere; have a think about where they’d best fit.

Keep you eye on the ball! Never lose sight of what your original intentions of the website are for. Give them exposure and space in order to get the message across. For example, if the website is geared so selling a particular product or service, have that as the frontrunner.

Get the colour balance! We’ve said before that colours can clash, which makes it harder reading. Depending on your intentions, selecting the right scheme goes some way of improving interactions. Doctor/medical websites tend to have a lighter scheme to reflect the mood. Get yours right.

Make it easy navigation. No-one wants to spend ages looking for something on the web because you’ve placed it badly. Keep it tidy, clean and simple, Trust me, 5 minutes would be a generous time to get out of someone looking for something.

Keep it bleeding simple. People hate doing things that take up a lot of time. One notable example are sign-up forms. Forms that want a lot of information are more likely to never be completed. Always try to put yourself in the user’s shoes and how you’d want the site presented.

The killer touch! Keep the words you need to make it short and sweet. Also make sure they are appropriate to a particular element.  Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.

Keep loading times short. Visitors are important, and we all know people hate waiting. If your website takes ages to load, that’s a bad sign. Check your coding and see if you can optimise if better.

Fonts and sizes. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font. Never choose fonts that are too hard to read, and keep a standard font for the text.

Make it pretty. We’ve talked about trying to keep it simple, but at the same time you don’t want something bland. First impressions are vital to maintaining traffic. Utilize textures/gradients that give your website depth and draw attention to your design The world may tell you that people don’t judge a book by its cover, but that’s a lie.

Q: What are the ‘don’t’s’ of web design?

Don’t place elements just because you can! Nothing like a bit of clutter to really annoy the user. Keep elements consistent and appropriate to the site, making sure they are sized and positioned correctly.

Adverts. Generally, they are an annoyance, but to the web creators, a vital way to source income. If you’re going to have ads, make sure they aren’t excessive. Strike a balance between ads and important content. If ads are more than your content, chances are your users will never come back.

Colour schemes. Again, to reiterate the points, choose your colours wisely. You don’t need to use every colour! Try to maximise how many colours you use, and see what blends well together.

Endless stream of words. Imagine reading a really long essay without any paragraphs. It’d be an attack on your eyes. And them picture that essay talking about anything but the subject. Remember to break your posts at regular intervals if you need to write a long post; that makes it easier to read.

Irrelevance. Everyone (including me) is guilty of rambling on and on. If you need to write long, keep it relevant, interesting and important. If you need to write about your life, write about important topics and not what dinner you had last night!

Overused keywords.  If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit. Your readers aren’t stupid!

Over-complicate searches. If you want users to stay, make sure your layout is contained and easy to use. If you make it hard for people to find certain elements, don’t expect them to stay for longer than a minute. Perhaps consider a search box, or get the important things out in the open.

Image exposure. Don’t over indulge on fancy images. Rather, they should be used to compliment/support your text. Too many images becomes too much. This also can lead to websites loading more slowly, especially with bigger/more images.

Different fonts. Another reiterated point. Don’t choose different fonts because they look fancy; always keep one standard font for your text. We can give a little leeway to titles. but never have more than 2/3 different fonts to style different things. And try to keep comic sans to a minimum!

Never hope for the best. I’m guilty of this. Alyways plan what you want in the site. For this reason, use wireframes! Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year old’s myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it.

Examples

So there’s some tips about designing effective, simple layouts. Now it’s time to look at some good and bad designs. Sharp readers will notice I break some of the rules here, but this is to highlight the issues. Let’s all picture ourselves as the viewer; we can judge if these examples are well-designed or not.

bad-web-design Good or bad?

good-website-design Good or bad?

68 This one’s obvious.

Button-Size Good or bad?

So I’m overloading on images. But the point should be clear that there’s certain ways to design your website that shouldn’t become a problem. I think the most important point is to keep things simple and relevant. Then you can begin to add the other layers on top. Below are links to two websites I used as source material. They are well worth a look.

Joshua Jackson’s article: http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

For 20 do’s and don’t’s: http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design

Project Discussion Part II: The Wireframe Model

Hello everyone, and welcome to October! In this post, we discuss the first design of the project, which we will create using a wireframe. This is an important process for all web designers, as it allows them to ‘draw/sketch’ their designs, experiment, and edit elements. Like an architect has blueprints, the same principle happens here.

Q: What is a wireframe?

‘The most important, yet underused, stage of any web or apps development’ – Paul Andrew, 2011

In a wireframe, we do little to none of the technical aspects of the site. What a wireframe is, is conceptual ‘sketch’ of how the website would look like online. This is the skeletal design of certain important page elements, like buttons, headers, navigation, organisation, in which the designer changes accordingly. Crucially, this is used to respond and picture how a user would interact with this design.

There are many wireframe tools to choose from. The most basic is, of course, trusty pencil and paper. However, we’re going to be a little more technical because we need to visual this on a technical level. For this reason, I was searching for one that a) was free, and b) didn’t involve a ’10 day free trial.’ Hey, call be cheap but Facebook’s free to use. Mainly.

I decided to try out ‘Lumzy’ as my wireframe tool. Why? Because it’s free and simply for me to use. Anyone interested in more information about free wireframe sites like Lumzy, check this link out:

http://speckyboy.com/2011/02/23/10-completely-free-wireframing-and-mockup-tools/

I showed you a concept design of my system, based on Steam. In actuality, this pen-paper drawing is in fact a wireframe itself. But let’s be more technical about this.

The Production Reel

You want a play-by-play? Here we begin to look at creating the wireframe using Lumzy. Feels like Art Attack. Anyone remember that show?

Lumzy1

Lumzy creation page. This is where we design the wireframe. The left sidebar contains elements. The blank canvas acts as a page to the website. Now we can be certain whatever is designed here will not look like the design I drew, but we can still play around with how things work.

So let’s start with the home page. You take any element you want from the left hand sidebar and drag them into the canvas to position. Clearly, I need to use the element called ‘button’ which will  be used to act as navigation tools. The main thing that will take long is the editing:  making sure everything fits and works as intended.

Home_Page20130923_231514 20131013_123043

So to speed things up, I’ve gone ahead and started on the wireframe. As a comparison, I’ve included both my pen-paper design and Steam’s design. Almost everyone will notice I took the Steam picture straight from my laptop, however you can make out the similarities I’ve kept throughout.

For my design, I envisioned a ‘two tier’ level (separated by  horizontal line) to better clear the home page. All the elements in Lumzy were taken from the left hand sidebar, which includes buttons and mock text and which are used to add the key elements to the page.

In the next series of post, we will look at into the design process in more detail, including factors that will influence the design process.