UI design - popup - css

I am currently developing a website.
Let me narrate the issue that i facing:
When users opens website they will get two options in a small pop-up.
Fisrt option in the popup will direct to sub-domain 1
second option in the popup will direct to sub-domain 2
now my query is, how to present this in a most appealing User Interface... Can you please give some ideas on this.
It would be really helpful if anyone can give the website names who have already implemented similar one / any UI related websites.
Thanks a lot
Regards,
Gourav

Your question leaves too much to the imagination. Define your goal, and I think you'll answer your own question...
Are you selling products skewed
toward different buyers (sub#1=cars,
sub#2=trucks)?
Are you selling the
same product to different
demographics (boys click here, girls
click there)?
Is it the same product built for different markets (commercial products, residential products)?
Whatever your situation is...
Determine the goal, and the rest should fall into place.
To the UI...
Since you're going to halt the visitor as soon as they land, just split your home page down the middle with whatever graphic you see fit (big button on either side...cars | trucks....girls | boys...commercial | residential) -- This approach doesn't require any JS, popups, etc. very clean and to the point.
If you want to have "canned" content on the home page, but force them to make a choice, I would prefer an element that slides into the screen like the "Welcome Back" message on SO, or even a screen take over (tho not as much because they're intrusive as !##$).
Pop-ups are so 1998 :-) Avoid at all cost
Here's a couple links on UI design/technique that may help (tons of technique and examples):
10 Techniques, and 40 Helpful Resources on UI Design Patterns

I think that instead of pop ups you should show those two websites and their previews (clickable) on the page side by side, and whatever preview user clicks, he may be redirected to that page.

Related

Finding click-counter for NFP website, written in iframe

I am a non-programmer working for a church. We have no tech staff. Our website is based upon a template that doesn't provide a widget for counting clicks. We'd like to add one (or preferably two) jpg image(s) with a counter(s) to track the number of times clicked, and display the cumulative total next to the jpg(s). Church members will go to the page and click each time they participate in one or both of two different church objectives.
Our web host says to do this I must find, write, or purchase 3rd party code written in iframe, to embed into one of our pages.
I googled the issue and am only finding hit counters which track visitors to a page, rather than clicks of an image. We'd prefer two different jpgs to track two different objectives, but if necessary I can change from two jpgs to one, if having two counters on the same page is a problem.
Can anyone point me to where I could get code like this either for free, or for pay, and what it would cost?
There is a lot of good information here. They talk about an issue with iframe receiving the click vs. you recording it. If you keep reading there is a possibility to work it. Hope this helps!
Look here: Detect Click into Iframe using JavaScript

Adobe Target, placing user in experience based on URL contains

If I have an Adobe Target experience that shows content in Experience A to 50% of users and content in Experience B to the other 50% of users...how can I insert someone into one of these two experiences?
I was thinking of having a button the user can click that has a url parameter added to it for example ?exp1, and then a different button that would have ?exp2.
But if I use the refinement 'url contains exp1 or exp2' in each of the experiences in target, then that is only when the mbox will fire. Whereas I want them to fire on the original page that the mbox is on.
Any help is greatly appreciated...thank you all!
Adobe Target will serve up your two experiences without having a user click a button. You can have experience A hard coded on your site. Then when you go to make your Target A/B test just enter the URL in the first pop-up box that asks for the activity URL.
Then on the next page Experience, A should be what was hard coded and live on your site. Select experience B and code up your second experience. When done you will select your audience - most likely all visitors and then make sure your set to 50/50 split.
This was a visitor will automatically be shown either A or B when they come to your site. The target mbox fires when the page loads and makes the decision who to show what to automatically. One interesting quirk with Adobe Target is that they don't send one customer to A then the next to B and the next to A as you may expect. Sometimes they send a bunch to A back to back before sending some to B. It works out to a 50/50 over time. And the first 24 hours of data may look a little funky as there is sometimes a latency in data being processed. Hope this help.

Is there any pros to duplicate browser/keyboard functionality?

Is it good for user experience to duplicate browser/keyboard functionality?
For example: to provide these links on a web-page.
"Back to top" link
"Print this page" link
"Add to Favorite" link
"Back" button/link
"Text zoom" button alt text http://shup.com/Shup/344995/110421205515-My-Desktop.png
Are they really create Site's usability and accessibility?
How screen reader will behave these links, will these confuse to screen reader users?
Many people haven't gotten into the habit of using the Home and End keys to go to the top and bottom of the page, so I don't find Back to Top links highly objectionable.
Print this page links can present a printer-friendly page, instead of the main page which is generally littered with banners and other stuff.
Add to favorites - Not a big fan.
Back button - Can be useful in workflow scenarios, but it better do exactly the same thing that the back button in my browser does. Generally the more common pattern is to provide a link, with describing text, such as "Return to Main Page."
Text Zoom Button - Love it. It allows me to tweak one site, while retaining the settings in my browser for other sites.
As a screen reader user I don't really care one way or the other. Listening to a couple extra links doesn't make a difference to me. Screen reader users are generally going to be a very small minority of the visitors to a site. If adding links such as top of page or add to favorites makes the site more usable to non screen reader users I would say add the links since it is something that's very easy for screen reader users to ignore. If you are writing a site specifically targeted at screen reader users then you may not want to add the links since they would be the majority of your users.
Adding such links should be motivated by a scenario. If users normally would print the page at a certain stage of the workflow when visiting your page, then it will be much more convenient for most of the users if the specific command option is directly visible and can be executed with a single-click.
Scenario: A user wants to buy an online ticket. They will select the event, choose a category, enter their personal details and billing information the finally will print the ticket. Instead of leaving the user alone at this last step and make him search the browser menus simply offer the print option inline in the body of the page.
I would say it was generally a very bad idea; the screen reader would definitely include ways of accessing the browser's implementation of that functionality, and duplicating that just wastes their time.
I would say that boilerplate-text is almost always bad for screen reader users.

how to organize my menu, taxonomy, views, pages in drupal 6

i am try to build a web site, it has a 2 level menu.
global|asia|euro|u.s (this is locaion menu)
about|home|news (this is content menu)
if a web site user clicks on global, it will show global|home page, if
the user clicks euro , it will show euro|home page, clicks on u.s it shows u.s|home page.
global|home , euro|home, u.s|home, all 3 have same format but different content.
for global|about, euro|about, u.s|about, if a user clicks on global , then clicks on about, it shows global|about page, clicks on euro, then clicks on about, it shows euro|about page, etc.
page content is different , but format same.
all things (items, nodes) in this web site have a location taxonomy attached to it.
for example, for home page,we have to show a picture, the picture has location attached to it.
so , when a user click on euro|home, the picture should comes from euro location , for asia|home, the picture should comes from asia location.
My question is, in drupal 6, how to organize my menu, taxonomy, views, pages to achieve the result.
A way to look at this problem would be to think of this as a multi lingual site. You have different languages:
global
asia
euro
u.s
Even if all the actual text is written in english, you can setup your site as though the languages are different. You can make different versions of english, so all the other text doesn't get translated to other languages. What's smart about this, is that you can translate your nodes, like the about page, and Drupal would show the one from your active language. This would be one way of fixing this, and clicking the different regions, would just change the language.
Another way to do this, would be to use taxonomy. Some of the things, like the menu system would be a bit more different to fix. There would be different solutions to solving your problem this way. In some ways, it would be more simple than making your site multi lingual. I think the easiest way would be to make a 4 different menus, one for each menu. Then you could make some logic in your template, that fx looked at the args, or looked at the taxonomy term you had associated to the node being displayed, and based on that, you would display the different menus. It would require much more coding, to get it to do what you want, and it's not exactly an ideal solution, but would make your site less complex.
Another way to solve this problem, could be using sub menus. So you made children to each region in your main menu. Then you could simply show the menu of the active one. This would probably be the easiest and most simple solution to your problem. Most of it, would be purely styling that would be needed to make it work like you wan to. There might be some issues making the right menu show all the time, but depending on how complex your site are, this shouldn't be a big deal.
These are 3 ways to solve your problem, each has it pros and cons, and the best is very much dependent on the nature of your site.

Bust iFrames accurately when implementing DiggBar or FacebookBar?

Understanding all the security and UI concerns with iFrames, I am implementing a toolbar similar to the DiggBar or FacebookBar.
A top bar persists across the top 30 pixels of the screen, and an iFrame displaying external content fills up the remainder of the page.
When users close the toolbar, and thereby exit my little site to go directly to the third-party site, how can I bust the iFrame properly and display the right page? If the user clicks on even one link in the iFrame, I end up showing the wrong page.
Given my understanding of browser security, and coupled with how DiggBar and FacebookBar fail to do this accurately, I'm guessing it cannot be done.
But I was hoping the Stackoverflow coders are smarter and might have an answer? :)
Thanks!
You can't. Because of browser cross site-scripting security, your bar which sits in its own frame cannot access any other frames and determine their URLs.
Not to mention that'll you'll be sued by website owners for numerous things and that you'll piss off every hacker out there.
This is the last thing you want to do if you'd like to NOT in your our office as that one guy who wanted to include everyone elses web site in their website with the owners permission.
I wouldn't speak up at any of the conventions either.
I've also added the question: "Have you ever written code or worked on code that frames other sites?" to my list of questions to use to weed out job applicants.

Resources