Website UI suggestions

[mvinc17]

Hi,

 

I am developing a website for my dad's welding and fabrication business and I am looking for tips on usability, while also maintaining good looks. I apologise in advance for the slow load time, this site is on a dev server in my office, and, being in Australia, the internet is really slow (approx. 400Kbps) upload. The link to the site is below.

 

http://fish.cairnspc.com/psw_dev/

 

Thanks

[Paralectic]

Make it really simple, a single sidebar or header to navigate the page with the content below, and a footer below the content with some links with more information and how to contact them + the address and such.

 

And don't use anything flashy or useless because such things make your website slow.

[Phage]

i would look at it but its stuck on the loading screen lol

please have a search box or something, they are really useful ;p having a navigation popup when you hover over something is nice too

[mvinc17]

Make it really simple, a single sidebar or header to navigate the page with the content below, and a footer below the content with some links with more information and how to contact them + the address and such.

 

And don't use anything flashy or useless because such things make your website slow.

Thanks for the advice, I'm trying to make this site as user friendly as possible for "normal", non computer orientated people.

 

i would look at it but its stuck on the loading screen lol

That's odd, what browser are you using? I've tried it in Chrome 33 for Mac and Safari 5.

[Brazsty]

Make it clean, i prefer a clean and simple website over anything else. It also loads faster !

[Phage]

~~~~

im using chrome atm >.<

[rashdanml]

Please. No fancy loading screens. 

[alpenwasser]

Ah, I see we do the same things for our dads.

One thing I noticed: The site doesn't properly render on a small-ish screen

(1280x800), looks like this to me:

There are a few ways to fix that, one of the more common ones I've seen is to

force elements to align vertically instead of horizontally once the horizontal

resolution drops below a certain limit.

There are a few ways to do that, but I'm a bit rusty in my CSS, so sadly I

can't give any specific implementation advice. But google around, it shouldn't

be too hard to find specific info if you don't know how to do it.

In general, I can recommend reading up on good UI design practices. There is

a ton of knowledge to the subject (and I'm not an expert by any stretch), lots

of different approaches and so on. Personally, I quite like the 'clean and simple'

approach TBH.

EDIT:

I like the general concept so far from what I can see.

[leodaniel]

Hi

These day proper design is not quite easy, I know that, myself designing my homepage (http://bio-regional.ch if you want you can send me your opinion about it, Contact field works).

 

What I would suggest you is following:

 

Choose between making seperate css for mobile devices (a lot of work), or fix the min-width to about 960px (In my opinion the best width for cross devices).

I would go for vector graphics, less size, sharp on every device! 

All animations should be CSS 3 Animations, works cross almost any mobile devices, uses GPU acceleration (huge benefit on mobile devices)

What goes to the design, I would highly recommend you to browse throw those websites:

 

EDIT:

Center your website please!!!

 

EDIT

Forgot this important Link: https://medium.com/design-ux/799d16952a56 (130+ design resource link!!!)

 

http://freebiesbug.com/ (A lot of good looking free stuff, just always check licensing)

http://kreativeshowcase.com/ (inspiration & resources...)

http://www.dollarphotoclub.com/ (Amazing royalty free stuff for 1$ each, saves sooooo much time)

http://www.cssauthor.com/ (a must in my opinion)

 

and a lot more, just google a bit

 

Now to my opinion about the design. 

Personally i would choose a smaller size for the blue Icons. Also I would delete the PSW Custom Title, the logo already says all!

 

Hope it helped you out a bit, If you have any question about css/html/php (I have some little experience), you are free to write me. Or google, helps most times!

 

leodaniel

[Ciccioo]

i'm getting an infinite blank loading screen with firefox

with chrome there is the "loading" thingy

 

anyway i can't see the website but i saw some code

the syntax highlighter shows a </div> that doesn't close any div, and you're missing the doctype

 

but yeah, it just won't load in any browser i try

in IE11 it stops loading and just shows blank

 

edit: i left for some time, and when i got back after about an hour the site was done loading

but i think it loaded wrong, because there are huge icons and a blurry image

also, visible scrollbars with no scrollable content

[zahlio]

First of all, your CSS is awefull, might want to clean it up. Also its impossible to load the page here in Denmark. Also on some of the big websites i have coded on, the general rule was to avoid big .png files.

Some other stuff i caught at first glance:

- DON'T use:

<center></center>

as its not supported in HTML5.

 

- Avoid using a loading script. Do it in the background.

- It's good practice to keep all CSS in .css files.
- Use jQuery from their CDN:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

[mvinc17]

Thanks everybody for your suggestions! I will continue working on the site and change the CSS so that it looks nicer on smaller screens, and, because this is a dev version, the CSS is in an embedded stylesheet, in production it will be on an external stylesheet, also the production site will use a JQuery CDN, not sure it I'll use Google's CDN or JQuery's CDN, both seem popular enough. The blurry images are just placeholder images, I am going on site today with my DSLR to get some decent images, and also some video.

 

The site loads slowly because of the development server's upload speed (0.4 Mbps).

 

Thanks again for the feedback.

[FrozenIpaq]

Why aren't you using any sort of site builder or content management system? Something as simple as setting up Wordpress will save you a lot of work and will do all the correct formatting for you. I'd also go with text-based navigation rather than icon-based navigation for a website.

[xXxYOLOxSWAGxXx_420BlazeIt]

Hi,

 

I am developing a website for my dad's welding and fabrication business and I am looking for tips on usability, while also maintaining good looks. I apologise in advance for the slow load time, this site is on a dev server in my office, and, being in Australia, the internet is really slow (approx. 400Kbps) upload. The link to the site is below.

 

http://fish.cairnspc.com/psw_dev/

 

Thanks

That looks awful.

 

I would install Wordpress and find a good template for it. It would look far better, and would have probably been designed by somebody that knows what they are doing.

 

Here is a set of guidelines that you should follow for every website that you make:

http://www.w3.org/TR/UNDERSTANDING-WCAG20/

 

If you read through the whole thing you would understand why  what you have done so far is so awful for the users.

[alpenwasser]

Why aren't you using any sort of site builder or content management system? Something as simple as setting up Wordpress will save you a lot of work and will do all the correct formatting for you. I'd also go with text-based navigation rather than icon-based navigation for a website.

Is Wordpress really the way to go though? I've never really worked with it

in practice, but from what I've read it can be ridiculously complicated.

But yeah, building your site from scratch can be a big task. I did it for

my dad's site, not so much because it was the smartest thing to do, but

more because I wanted to get some proper coding practice and a good learning

experience. But it was a pretty monumental task for just one person, took

me several months (I basically wrote my own CMS from scratch).

But yeah, using a CMS isn't such a bad idea IMO, depending on your needs.

Re: Icons: Yes, have text-based navigation by default, you can still add

icons to the text for making it clearer, but the icons can be a bit hinky

when it comes to browser compatibility, which might render the site unusable

for some people (say, blind people who use a screenreader).

[FrozenIpaq]

Is Wordpress really the way to go though? I've never really worked with it

in practice, but from what I've read it can be ridiculously complicated.

But yeah, building your site from scratch can be a big task. I did it for

my dad's site, not so much because it was the smartest thing to do, but

more because I wanted to get some proper coding practice and a good learning

experience. But it was a pretty monumental task for just one person, took

me several months (I basically wrote my own CMS from scratch).

But yeah, using a CMS isn't such a bad idea IMO, depending on your needs.

Re: Icons: Yes, have text-based navigation by default, you can still add

icons to the text for making it clearer, but the icons can be a bit hinky

when it comes to browser compatibility, which might render the site unusable

for some people (say, blind people who use a screenreader).

 

I haven't used it recently but back in 08/09 I had used it to put up a site and didn't run into any major issues with it. Some have had bad experiences with it but if you take the time to read some basic guides it can be worth it. I have very little coding background (see: none) but have been able to put up a decent size site and maintain it using WP. 

 

Just need some patience with WP that's all.

[Alpha17x]

With any web design or design at all you need to narrow down the function; the form of the website will follow suit to that.

 

What is the business? What core concepts and ideas does it need to communicate to new customers and at the same time and in the same space, what services and information does it need to communicate and provide to existing ones?

 

 

Consider setting the web design aside for a short period of time and make a concept/design document.  Sit down with your father an figure this out.  Who are his current customers? What kind of fabrication do they have him and his employees doing consistently? Is that the kind of fabrication they are most experienced in? Is it what they've done the most of over-all.  You could set up a website with his company banner along the top and a navigation bar directly below that, and taking up the main portion of the page (but not requiring any scrolling) perhaps a slide-show of your father and his employees at work, doing what they do.

 

The main page is in most cases (but not all) a presentation to new customers, new viewers, new subscribers, whatever the business model may be; it's like the hook of the essay. You want their attention immediately.  You've got about 10 seconds to get a potential new customer interested before they consider moving on.

 

One 'trick' you can do that I've found has worked quite well for clients is set up a page in a way similar to what I described with the slideshow, but one or more of those is a video.  Don't let it auto play, that customer will be gone the moment they hear sound if they're not expecting it.  They'll see that play button and become curious.  This is your fathers chance to pitch his business to someone who wanted to hear it.  That potential new customer hits play and they hear a quick (2 minutes at the most) overview of the company.

 

"Hi I"m John Doe, President of PW Customs, we've been a trusted name (if they can back the claim up) in (type of fabrication) fabrication in the (county/state) area for (x) years"  something to that effect. So you've got your customer hooking picture, with the video icon on it so they know it's a video, and it was entirely up to them to click it, and then now that they're watching the video a personal introduction from the business owner, plus one last hook in.  

 

As long as they don't sense it's bullshit people like to hear that they're learning about a business with multiple years of experience doing what they might be interested in purchasing services for. If the business itself has not been running for very many years (under 5) you/he could instead pitch collective years of experience just don't bullshit it and it will be great.

 

This is one idea/concept of many different things you could do; the important things to remember are;

 

Form follows function: were about what the site needs to communicate immediately on the front page before throwing in 50 links on a geocities style sidebar.

Potentially the best example of what I'm trying to communicate is apple's website.
http://www.apple.com/

 

What does apple do?  They sell electronics; so the first link is to the store
We've established that apple sells electronics, what are they're primary brands? Mac, iPhone, iPad, iPod, and they've also thrown iTunes in there because it's a big part of their content delivery method. And lastly we have support. Having support last on the list communicates that they are ready to help and are confident in their ability to solve their problems, but also since it's last, that support is potentially not often needed.
So they've got the store as the first link on the left to accommodate new visitors who are likely there because they are interested in buying an apple product, followed by up-front and immediate links to their product lines so a potential buyer can within seconds, get to the information they want without having to read down the page. The standard time frame like I said is 10 seconds before someone loses interest if they can't find what they wanted or something doesn't catch their eye, Apple's website design accomplishes the hook in -one- second.

 

The picture says a thousand words; Apple uses the primary screen space on their front-page to show-case either their most recent device, or promote an existing one. Right now it's a coach using an ipad to review performance metrics with an athlete.  The photo was so well planned and communicated that I as a viewer was able to interpret what that picture was communicating  to me within a second or two. So the apple website has given me immediate links to what I could be looking for as a new or returning customer within 1 second of the page loading, and given me a second hook to stick around within an additional 2 seconds.  I've been on their website for three seconds and I know that They sell electronics, what their primary product lines and services are, I know that if I need help they have support readily available and they have in a single picture shown me one potential career/business based usage for one of their iDevices. And on top of that image they are offering me the opportunity to further explore that idea by watching a video, but not forcing it upon me if I don't want to see it right now, or even ever.

 

On top of all of this; Apple's website follows a very simple design. A website traditionally flows in a vertical environment so they present their information from the most important to them and their customers to the least important, but no information on that front page is unimportant.

 

You have the apple logo/banner so you know you're in the right place.

directly below that you have the key items you were likely to have visited the website for if you want to dive into one of them right away with no delay.

below the convenient and immediate menu, you have an image acting as hook to new customers, a sales pitch to potential upgrades and communicating one of many potential ideas about why that particular apple product, or any apple product might be useful to you.

And below that are for more small images communicating their product lines and whatever important topic they might need to communicate, or might be expected from them.

 

It looks like they've actually taken the 10 second rule very seriously. On average it takes me about 6 seconds to get to information I want on any of their products.

 

 

SO TL;DR, Here are my suggestions to you.

Since website is a vertical environment the first thing you want is the company logo/banner. Display it proud at the top, but not too loud (it should take up no more than 10% of the screen, ideally 5%.

 

I'm a potential new customer, what do you have to offer me. I was likely looking for fabrication services if I even made it to the page.But perhaps I was looking for something similar.  If I was looking for something similar I might end up looking for fabrication services later. if I do it later, I'm not your customer. 

 

So right below that banner in a horizontal menu bar; first link; 'Fabrication Services'  or '(type of) Fabrication Services

Ensure you differentiate between a product and a service. If the business frequently makes cable trays, that's a product not a service. However if the business offers custom fabrication or digital drafting design, those are services.

 

Second link; How does the business sell it's products? What products does it sell, list them here. Does the business make those cable trays? they go here,  storage tanks? here. any physical object the company frequently or repeatedly produces either en mass or to custom spec. if it is a regular occuring item that is offered it's a product and it goes here.

 

Third link: 'About PW Customs'; Your customer or potentail customer has been on your website for about 4 seconds.  They saw the banner, so they know they're on the PW Customs website, they know that you offer Fabrication Services, and if applicable, they know you have recurring items that you can fabricate if they just want a storage tank or cable tray or whatever you might produce, They interpret from customs and from a quick glance at the services list that you can make items to spec. But who are you?  why should they choose PW customs.  The front page is your cover-letter and presentation, the 'about' page is in a sense, your resume. How many years of experience do you have? does your business have any awards/accolades?  They go here.

 

For the last two links I would suggest 'Careers/Jobs' and 'Contact'

 

Having careers on the main menu, immediately visible for all shows that your father has a growing business and he's looking for talent. Even if not actively seeking employees you/he can put a page advising something along the lines of 'While we are not actively hiring, we are always on the lookout for exceptional talent' with an e-mail address or form to submit a CV/Resume. Even when technically not hiring, growth and evolution are communicated. This company hasn't stagnated and it's not dying. I as a customer or potential customer can have faith in their ability to provide the service they're advertising.  Or the employee of your dreams might find their way to you through that menu.

 

Lastly; contact.  I have seen what you offer, I have seen how you do it, I have learned about your company and I have enough faith in your ability to deliver a service product to me that I want to know more. I don't want to go hunting at the bottom of the page for some small link to talk to you. Thankfully you've put it at the top of the page.

 

If your dad and yourself are more traditional guys You can look at it like this;

 

I walked up to you and you introduced yourself as PW Customs (website header). You anticipated that I might have an idea of what you do because I walked up to you, but i obvously want to know more so you volunteer a brief overview of your services and products to me. While we were talking you gave me a bit of info on the history of your company  and how you do what you do. You are confident in telling me what you do and how you do it and how long you've done it for.  my confidence in giving you my business is growing by the second.  We talked about your growth (careers). and you showed me that your willing to talk in more detail about the topics you gave me a quick overview for, which is like giving someone a firm handshake online.

 

You did all of this in less than 10 seconds on a website.

 

 

I'm going to go before I turn into the J RR Tolkien of interface design topics (it's a passion of mine)