mobile
for MarketWatch
Market Watch Redesign Experiment, Part 1: Network Bar and Header (web only)
I have a mild fascination for stock market websites due to the shear volume of data. Most are tests in patience at best, others more bearable. MarketWatch seems to be one of the better in terms of layout, but they’re just as chock full of info.
I think MarketWatch could be simpler. This experiment challenges my assumptions.
Please note: I’m not trying to reinvent MarketWatch and I don’t assume that I know their business or their needs any better. The sheer volume of their content makes it hard for me to breathe and I’m testing myself to see if maybe I could generate a few solid ways to make it better. I want to simplify while reusing as many of the elements as possible. I’m assuming, too, that everything has a purpose, that I can’t just randomly throw features out or make MarketWatch look like a business they are not.
Current header for MarketWatch
Since I’m designing top down, I first focused on the “hat_div”, black bar at the top of the page. This typically serves as a website promotional tool for companies in the network; in the case of MarketWatch, it’s also where user’s can search.
On other websites in the network, the search box may or may not be present, all depending on the needs of site (as far as I can tell). I’d be curious to find out how well this really promotes as I have sneaking suspicion that it’s more often overlooked. So I decided to lump all the site links into a single network menu, prominently featured to the left.
I also move the design away from using the background of the page as the color of the “selected” network tab. Looks wonky on many sites in the network. A thin light line was also added to make body/network bar separation more pleasing.
On the main menu of MarketWatch is a membership promotion that I didn’t feel was getting the proper amount of visibility. I’ve move this to the middle of our now much freer network bar. Search stays where it is because the top/right is a natural place for search; having it here also makes sense network wide.
Currently the world map/summary that indicates which markets are open/closed and the status of the DOW and the like is squeezed in beneath the logo. Not sure how much visibility this really needs, but I’ve made a few enhancements and gave it a more prominent place.
Among other things, I’ve made “open” more bold and gave all the text a bit of a size/space bump. This move made it possible to free space around the logo, better focusing the brand. I’ve left date and time basically where they were.
Where this focus on the map/summary is risky is how it reduces the emphasis on news. Frankly I don’t understand why the featured articles were given so much real estate – but there may be a legitimate business reason.
In my approach, I’ve altered the featured articles to be image focused: a single square image is overlapped by a category name and short title. Controls are beneath, just as with the recent news list.
Recent news is still fairly spacious and keeps items to single lines, with a fade effect to the right to deal with long titles.
So far that’s about it. I’ve spent a fair amount of time designing a mobile version of the site, but it needs a bit more work. I should be posting about this and more changes to my MarketWatch concept soon.
Here’s my version of MarketWatch network bar and header as it exists today:
Simpler header for MarketWatch
Related Posts:
0change easier
on mobile
UI Pattern [Idea]: 3D Camera Position Control for Mobile Games
This is a possible solution for changing the “camera” position of 3D games on mobile touch screens when multi-finger gestures for rotation are not possible. In third person game views, this might make it easier to see areas around the on-screen player.
The key gesture is the press and hold of the left hand thumb. Once held, an element appears beneath to indicate that the user is holding and the game is ready for a perspective change. Pressing and dragging along the curve with the right hand rotates the screen. The perspective indicator’s arrow follows the right hand.
To change the z-axis perspective, the user wraps the first finger of their left hand around the top of the screen, enabling a up/down gesture of the right hand to modify the view.
It is entirely possible that the use of the left hand finger is unnecessary, but we’d need a working prototype to know one way or the other.
Related Posts:
0navigation
[Updated] UI Pattern [Idea]: iPhone App Breadcrumbs
For years, breadcrumbs have been a reliable method for retracing one’s steps or to get a sense of location on websites. So far I’ve not seen anything quite like that on mobile apps, so I thought I’d take a crack at working out how breadcrumbs might work in a touch environment.
Please note: This is a design experiment. I’ve not actually built this, yet.
Attributes and features of the iPhone breadcrumb UI element:
- Each items serves as a button back to its respective level.
- When breadcrumbs are too difficult to read, hold and zoom to magnify.
- Items evenly space where room is available.
- When space starts becoming tight, the right side of all but the last item is faded out.
- When space is too tight for words, only the arrows remain.
Original screenshots
Second generation
After a little time away from the designs, I realized there might be some benefit to keeping home and the last item always visible. Home also didn’t have to be text, an icon might do.
With Home icon and visible last item
Nth items
Related Posts:
2Visit
Strands Fitness Pro (app)
Like its sister website, www.strandsfitness.com, the Strands Fitness iPhone app was feature packed yet daunting to new users. We were given the task of making it simpler and more goal oriented. My solution was a super simple design called “Big Dum Dum” (also see Strands Fitness: Before & After).
Big Dum Dum punted the former dashboard layout for a list view that was self-descriptive and which could be easily adapted to a free version format. Frequently accessed features are up front where they can’t be missed and a more logical view hierarchy put in place.
I’m pretty satisfied with version 1 but we’re not finished. There are still many ways we can make the app more useful and fun.
Roles: Mobile, user experience, user interface design. Wireframes using OmniGraffle.
Related Posts:
1Strands Fitness for Android (Free)
After revamping the Strands Fitness app for iPhone, I guided the conversion of the look to Android. The first thing we did is replace the rounded buttons for lists and squares. All graphics had to be recreated and icons came in at least three sizes (because there were three target resolutions). Had a bought with 9-patch images, so there were some rough spots.
Working in Android can be really weird since there are so many versions. Some use the older 3D leaning-towards-you icon style and others – the more current versions – are flatter, tamer. Impossible to test everywhere, so it seemed wise to stick to as much stock UI as possible.
Strands Fitness for Android (free)
Roles: Design: mobile, UI, UX.
Related Posts:
0microformats?
Mobile Apps: An Immediate Reason for Microformats
Okay, microformats. Those little semantic HTML patterns that help bring meaning to content. Those extra tags and attributes that some of us have had a hard time adopting in any consistent way. Well, we’ve got at least one reason to get serious about them now: mobile apps.
Mobile apps – at least those with some level of support – help make microformats truly useful. An hcard phone number may or may not make sense in a blog post on a desktop browser, but on an iPhone, one click can initiate a phone call or add contact information to an address book. While this an also be done for PCs, the call to action may not seem as immediate or necessary as it can on a mobile phone. Frankly making a phone call off of a hyperlink just seems cool and this brave new world is only getting started!
As the line between desktop and mobile continues to blur and more communication mediums merge, microformats will likely increase in importance. I for one am taking a fresh look at implementing them now.
Related Posts:
0search page
From Prototype to Design
This series follows the development of a web/mobile application from beginning to final design. Started May 2011.
LegendList: Desktop Updates and Mobile Styles (Rapid Prototypes II)
Since the last post, the LegendList prototype has evolved a bit. We’ve decided to go with a drill-down menu that appears when the Activities search box is hovered and not with a multi-level main menu as we’d previously planned. We feel this approach makes for a more natural and effortless introduction to available activities. Seems more right, but time will tell.
By not having the big menu along the top, we’re primed for a mobile version – an important project requirement. So let’s get to it.
The above is how the prototype first appeared on an iPhone and without a mobile-optimized style sheet. It looks… well… shrunk. Not very mobile friendly.
My first goal was to upsize and reformat. A single centered column would also be appropriate. I didn’t want to create a completely separate mobile version of the page, so I worked up a quick stylesheet for screens up to 480px wide.
Decent start. Since the headers would likely become navigation bars in future iterations, I anchored them to the top. Afterwards I removed the rounded box from the search options and made the fields larger and more in the flow.
Okay, that’s more like it, but things aren’t yet perfect. Drill-down is a bit visible if you look close enough, there’s an odd line beneath the labels, and if I press “Search” and then Back on Safari, the stylesheet freaks out.
Even with it’s flaws, we must remember this is a prototype and it doesn’t need to be perfect. Once we get a better of understanding of what works, what doesn’t, and the general personality of the app, we’ll be better prepared for a proper design.
So let’s move on now to search results and activity pages.
Related Posts:
1every graphic for
different resolutions
Solved: Android Status Bar/Notification Icons
The sizes Google gives for status bar/notification icons on Android aren’t entirely clear or accurate. Here are the sizes I’ve found that look correct. Since the icon must be surrounded by 2px of empty space on all sides, I’m separating icon from total size.
The sizes I found were:
hdpi: 34x34 (total = 38x38)
mdpi: 21x21 (total = 25x25)
ldpi: 15x15 (total = 19x19)
These seem a little different than what others have noted, so feedback is welcome.
Related Posts:
0Photoshop alonefor 9-patch images
Highlights
- Need 9-patch tool
- Photoshop isn't enough for Eclipse
Solved: 9-Patch Images and Eclipse (Android)
Let’s get right to it: if you want to create a 9-patch image for Android and you’re developing with Eclipse, you MUST use the Android SDK or Eclipse will show errors. Photoshop or another image editing tool alone will not work (I’ve spent too much time trying).
The Android 9-patch image approach should seem fairly similar to any designer who’s ever used a single image to produce a rounded box with CSS. Android basically splits the images, places the corners, etc. for you.
Related Posts:
8app redesign
Highlights
- Redesign of Strands Fitness
- Design of Strands Fitness Pro for iPhone
Strands Fitness: Before & After
Recently the newly anointed Strands Fitness team was instructed to simplify and clarify a product that was chock full of good features, but sinking under its own weight – at least visually. User experience had been an afterthought and the UI was tired, washed out, and bloated. Strands Fitness needed a diet.
My job was to drive the creative side of the team to solve the biggest user experience and interface problems with our site and mobile app and to get things done “yesterday”. I turned around a new built look and feel for both web and mobile apps within a few weeks.
Here is a look at the results.
Web app
One of our first tasks was to revise the registration: a complicated, buggy, and unnecessarily long process. We cut four pages down to two, gave the site a proper message, and added a Facebook login/sign up option.
We went banshee on the interface and stripped out anything we felt was unnecessary or in need of further development. We simplified the navigation and made the new Progress page the default. Proper action calls were developed and much attention given to fitness goals. The icon-only Share menu was replaced with a textual, content-sensitive mutton.
Though limited time prevented us from doing all we’d hoped with version 1, we managed to crank out a leaner and meaner UI that was far superior to the slow loading, Las-Vegas-meets-lawn-furniture aesthetic of before (pardon the hint of bitterness).
iPhone app
Though in some ways a pretty cool app, Strands for iPhone was frustrating to learn and wasn’t particularly convenient on the go. Furthermore it also was larger in file size than it needed to be with more settings and theming options than you could throw a stick at.
I worked up a theme named “Dum Dum” that put the most frequently used mobile options up front and used a single theme. We cut the size by approximately half. We also got a bump in speed, at least on the iPhone 3G where things run pretty slow these days.
On a related note, Strands Fitness for iPhone has been made the outstanding app section in the App Store of Spain. And we haven’t officially announced it, yet (as of time of writing).
Conclusion
Given the time we had to do all this (and so much more than I’ll describe here), I’m pretty happy. Getting Strands Fitness in shape (pardon the pun) has gone amazingly well. Our goals of a simplified, easy to learn and use fitness app are being realized, but we’re not the kind of team that’s easily satisfied so expect many more improvements as time goes on.
Roles: Design: web, UI, UX. CSS, HTML, JavaScript, Ruby on Rails.